×
  • Best Way To Build And Publish Angular Library (v10)

  • 03 – Manage Angular Library Dependencies

    Lesson List

    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

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

    news-twentyfour/package.json
    
    {
      "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.

    app/angular.json
    
    "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
           ]
         }
         // ...
       }
      }
    }
    
    Angular Library Dependencies
    .
    .
  • Enable Notifications    Ok No thanks