How to add external js file in angular 6 library

Question

I am creating an angular library (version 6) which is based on angular material for which I need to include the hammer js library.

I know that in angular 6 we can add the external js library in the angular.json under the project's configuration. But this does not work in case of above library. I tried to add the external library in the following way.

"my-library": {
  "root": "projects/my-library",
  "sourceRoot": "projects/my-library/src",
  "projectType": "library",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-ng-packagr:build",
      "options": {
        "tsConfig": "projects/my-library/tsconfig.lib.json",
        "project": "projects/my-library/ng-package.json",
        "scripts": [
          "../node_modules/hammerjs/hammer.min.js"
        ]
      }
    }
}

But I am getting this error.

Schema validation failed with the following errors: Data path "" should NOT have additional properties(scripts).

Please suggest what is the correct way to add external js file in the angular library.

Answer 1

you can add your external library in the tsconfig.lib.json file.

Open that file and add your desires library under types node that you can find in compilerOptios. I give you and example. In my case I referenced the library from my project node module. You can do the same with your hammer.js library. Good luck

Answer 2

You can't, that's the behavior of ng-packagr, you'll get that error every time you try to add assets to a Library. check this discussion for possible solution : https://github.com/angular/angular-cli/issues/11071

Answer 3

Regarding the OP's specific example trying to add hammer.js. Just npm install hammerjs then edit your main.ts file and add import 'hammerjs' then it will be available globally.

Also see this article.

Answer 4

You should try below command if you have used angular version 1.x before. And it works for me.

ng update @angular/cli --migrate-only --from=1.7.4

Answer 5

first add the libbrary in index.html or in

"scripts": [
"node_modules/hammerjs/hammer.min.js"
]

npm install d3 --save

npm install @types/d3 --save-dev

If the library doesn't have typings available at @types/, you can still use it by manually adding typings for it:

1. First, create a typings.d.ts file in your src/ folder. This file will be automatically included as global type definition.

2. Then, in src/typings.d.ts, add the following code:

   declare module 'typeless-package';
   

3. Finally, in the component or file that uses the library, add the following code:

   import * as typelessPackage from 'typeless-package';
   
   typelessPackage.method();
   

please follow the link

Answer 6

remove ../ before path of node_modules

"scripts": [
    "node_modules/hammerjs/hammer.min.js"
]