Assets support for Angular 7 Library

If you are building libraries in Angular and want to supply assets from the library package, here’s how!

Angular 7 assets support

Imagine you are building a library that displays beautiful pages with images or a calendar component with a calendar icon. Our experts at Clairvoyant can effortlessly supply the asset within the library build, so your users don’t need to stress about adding them to their project.

Support for the assets inside the library is a known issue and it has been around for a very very long time. Here’s the link on Angular-Cli Github: https://github.com/angular/angular-cli/issues/11071

So, let’s get started.

Step 1: Install a builder created by awesome #linnenschmidt (http://linnenschmidt.dev/)

npm install @linnenschmidt/build-ng-packagr --save-dev

This builder is nothing but a webpack hook that runs after each build completes. I analyzed and it’s not doing anything for your project’s build process.

Step 2: Replace the Angular’s builder

Replace the build architect of your libraries by @linnenschmidt/build-ng-packagr:build . To do that, go to angular.json, locate your project and

"targets": {
 "build": {
   "builder": "@linnenschmidt/build-ng-packagr:build"

Step 3: Link the assets

This is the normal angular part where we specify our assets so angular can copy them in the build folder while creating the build.

{
     "glob": "**/*",
     "input": "./dist/<project-name>/assets/",
     "output": "/assets/"
 }

The entire file will look like below, where you can see we have added our assets inside “architect” -> “build” -> “options” -> assets

"architect": {
      "build": {
        "builder": "@linnenschmidt/build-ng-packagr:build",
        "options": {
          "tsConfig": "projects/<project-name>/tsconfig.lib.json",
          "project": "projects/<project-name>/ng-package.json",
          "assets": [
            "src/assets",
            {
              "glob": "**/*",
              "input": "projects/<project-name>/src/assets",
              "output": "src/assets"
            }
          ]
        }
      },

That’s it, we have configured everything and made all the required changes! The entire angular.json file’s build object will look like below:

"build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist/<project-name>",
      "index": "projects/<project-name>/src/index.html",
      "main": "projects/<project-name>/src/main.ts",
      "polyfills": "projects/<project-name>/src/polyfills.ts",
      "tsConfig": "projects/<project-name>/tsconfig.app.json",
      "assets": [
        "projects/<project-name>/src/favicon.ico",
        "projects/<project-name>/src/assets",
        {
          "glob": "**/*",
          "input": "./dist/<project-name>/assets/",
          "output": "/assets/"
        }
      ],
      "styles": [
        "projects/<project-name>/src/styles.scss"
      ],
      "scripts": [],
      "es5BrowserSupport": true
    },
    "configurations": {
      "production": {
        "fileReplacements": [
          {
            "replace": "projects/<project-name>/src/environments/environment.ts",
            "with": "projects/<project-name>/src/environments/environment.prod.ts"
          }
        ],
        "optimization": true,
        "outputHashing": "all",
        "sourceMap": false,
        "extractCss": true,
        "namedChunks": false,
        "aot": true,
        "extractLicenses": true,
        "vendorChunk": false,
        "buildOptimizer": true,
        "budgets": [
          {
            "type": "initial",
            "maximumWarning": "2mb",
            "maximumError": "5mb"
          }
        ]
      }
    }
  }

That’s how you can allow assets to be served with builds in Angular Libraries. In the next article, I’ll explain how to install this library into an angular Project and use the assets in it.

Conclusion

This is how you can pass the assets within the library build in Angular. By enabling asset support, you can develop a library with more precision and less trouble for your consumers. One of the most important things in the World of coding is “Less is More”.

Thank you. Happy coding :)