03 – Manage Angular Library Dependencies

In this lesson will see how can we set or manage the Angular Library Dependencies which means the dependent packages will be installed in whichever angular project it been installed.
Let’s consider our current news API service so till the API request is pending we will show a loader and loader will be of ngx-spinner

Install Angular Library Dependencies

For installing a dependency will go to the library folder and over there we can run

npm install ngx-spinner --save

This will create a node module folder in your library folder and package.json will get updated.
Also if you have some pre-installed packages in your angular application workspace we can just add that package in the package.json file.

{
  "name": "news-twentyfour",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^10.1.1",
    "@angular/core": "^10.1.1"
  },
  "dependencies": {
    "angular-epic-spinners": "^2.0.0",
    "ngx-spinner": "^10.0.1",
    "lodash": "^4.17.4", // custom added
    "tslib": "^2.0.0"
  }
}

So whenever the user installs the library it will make the defined dependencies are installed.

Setting External Packages Styles and Scripts

Some of the plugin that required the styles to be imported during build through angular.json we can also do that for the library.

"news-twentyfour": {
  "projectType": "library",
  "root": "projects/news-twentyfour",
  "sourceRoot": "projects/news-twentyfour/src",
  "prefix": "lib",
  "architect": {
   "build": {
     "builder": "@angular-devkit/build-angular:ng-packagr",
     "options": {
       "tsConfig": "projects/news-twentyfour/tsconfig.lib.json",
       "project": "projects/news-twentyfour/ng-package.json",
       "styles": [
         "node_modules/primeicons/primeicons.css", // package styles
         "projects/news-twentyfour/styles.css" // custom styles
       ]
     }
     // ...
   }
  }
}

.
.