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.

Solution 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

Solution 2

So here are two possible problems we need to address

1) How to add the reference of external JS in the main angular project(demo project)

2) How to add the reference of external JS in NPM package.

The solution for the 1'st scenario is :

Provide the reference of your external JS in your angular.json file of main angular project in a script tag and provide the path of your package from your libraries node_modules folder like this.

"scripts": [ "./projects/my-cool-library/node_modules/my-exteranl-library/dist/x.js"]

The solution for the 2'nd scenario is :

Approach 1

So now you have created the NPM package from your library and you are going to use it in different project. obviously your 3rd party package dependency will get auto downloaded once you download your package you just have to provide the reference of that JS in script tag of angular.json file of new project.

"scripts": [ "./node_modules/my-exteranl-library/dist/x.js"]

Approach 2

Don't specify your third party dependency while creating your NPM package remove the entry from package.json file of your cool-library

"dependencies": { "my-exteranl-library": "^1.1.0" <-- Remove this } and add the js directly in newly created application via CDN in index.html file using script tag

<script src="https://demo-cdn.com/ajax/libs/my-exteranl-library/dist/x.js"></script>

There is 3rd way very you can download the JS by writing the code in your library will share here shortly.

Solution 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.