Build & Serve 3rd party Assets and Static files — Angular

Build and serve 3rd party images in your Angular app.

Many a times we may need to include 3rd party assets or static files in the consuming angular application. 3rd party could also mean your own private or organization’s component library. Angular provides a way to export the assets for build and serve in your local as well as built files.

For simplicity I am going to show how to use images from a private component library in the angular app. Lets see how to do this:

1. To build and deploy to server: Add glob configuration in angular.json
2. To serve locally over localhost:4200: Add Copy command in package.json

Build and deploy to server:

Let’s say we have our component library installed in angular app:

npm install @angular/cli -g
ng new TestProject
npm install @myComponentLibrary

The above command will add myComponentLibrary under node_modules C:\Workspace\Projects\TestProject\node_modules\myComponentLibrary . All assets are under node_modules\myComponentLibrary\assets\img .

Let’s go to angular.json and add the glob section to ensure the assets are copied over during build(either on pipeline or for local dist folder).

"projects": {
    "test-project": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            ...
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input":   
                    "./node_modules/myComponentLibrary/assets/img",
                "output": "/img/"
              }
            ],
            ...
          },
          "configurations": {
            ...  
          }          
        },
        "serve": {
  ...
        }
      }
    }
  },

The glob pattern allows you to specify the desired package assets and where to load them in your build. The end result is https://your.project.url/img/assets should be able to load component library’s images. The paths are mentioned with src/ as root folder. Angular CLI will write the images to dist/test-project/img . You can also add ignore patterns or some images to filter the static assets.

"assets": [
  {
    "glob": "**/*",
    "input": "src/assets/",
    "output": "/assets/"
  },
  {
    "glob": "favicon.ico",
    "input": "src/",
    "output": "/"
  },
  { 
   "glob": "**/*",
   "input": "src/assets/",
   "ignore": ["**/*.svg"],
   "output": "/assets/" 
  }
]

Serve locally over localhost:4200:

By adding glob configuration in angular.json we ensure that the images get served while accessing through dev or prod sites. To ensure that the same images are being served while running the angular project, we will have to add a copy command for the assets.

"scripts": {
    "ng": "ng",
    "start": "npm run copy:assets && ng serve",
    "build": "ng build",    
    "lint": "ng lint",
    "e2e": "ng e2e",
    "copy:assets": "cp -R node_modules/myComponentLibrary/assets/img src/ ",
},

Here we add a copy command to copy the assets first and then serve the app locally.

In conclusion:

By utilizing node-glob and copy assets commands we can import static files and images from component library to serve in your angular app, locally/on server.