Use assets from the Angular library in the application

Question

I'm using Angular 8 and I have a separate application with its own CSS styles and assets. I want to embed the library component inside the main application like

<lib-landing-page-preview></landing-page-preview>

The directory structure is

The library assets are inside the /projects/landing-page-preview/src/assets where the style.scss is the main CSS file inside the scss directory.

The root angular.json file has been updated

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    ... // main application project
    "landing-page-preview": {
      "projectType": "library",
      "root": "projects/landing-page-preview",
      "sourceRoot": "projects/landing-page-preview/src",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build",
          "options": {
            "tsConfig": "projects/landing-page-preview/tsconfig.lib.json",
            "project": "projects/landing-page-preview/ng-package.json",
            "assets": [
              {
                "glob": "*/*",
                "input": "projects/landing-page-preview/src/assets",
                "output": "src/assets"
              }
            ]
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/landing-page-preview/src/test.ts",
            "tsConfig": "projects/landing-page-preview/tsconfig.spec.json",
            "karmaConfig": "projects/landing-page-preview/karma.conf.js"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "projects/landing-page-preview/tsconfig.lib.json",
              "projects/landing-page-preview/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }},
  "defaultProject": "qcg-frontend"
}

While development, I'm the library is build using following command

ng build landing-page-preview --watch

and running the main application using

ng serve

But the assets files in the library directory does not seem to be working.

The ng build landing-page-preview --watch command gives

Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(assets).

what do you mean does not seem to be working? Are they not being displayed, is that what you meant? — Wahab Shah, Jul 08 '20 at 07:38

JsAndDotNet · Accepted Answer · 2020-07-08T08:21:41.480

There are a couple of bits about your angular.json that seem amiss.

I had a similar problem when I created a project that wasn't SCSS. I then needed to convert it. I can't see any reference to SCSS in your angular.json. The fix for that was to follow this. You could add schematics information in your angular.json if scss isn't parsing at all (see example below).

The next thing is that if you are adding extra styles, you need to add their location in the angular.json.

Below is an example where I have added additional styles to a project and got the SCSS to compile. See comments for where to look (I have added something that would hopefully be right for that extra lib folder).

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "myprojectname": {
      "projectType": "application",
      "schematics": {   /* SCHEMATICS INFO - REMOVE THIS COMMENT */
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "../dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.webmanifest",
              "src/lib" /* ADD EXTRA ASSETS LIKE THIS HERE AND REMOVE THIS COMMENT */
            ],
            "styles": [
              "src/styles.scss" /*<- ADD EXTRA STYLESHEETS HERE AND REMOVE THIS COMMENT */
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "...": "..."
            }
          }
        },
        "serve": {
          "...": "..."
        },
        "test": {
          "...": "..."
        },
        "lint": {
          "...": "..."
        },
        "e2e": {
          "...": "..."
        }
      }
    }
  },
  "defaultProject": "myprojectname",
  "schematics": { /* SCHEMATICS INFO - REMOVE THIS COMMENT */
    "@schematics/angular:component": {
      "styleext": "scss"
    }
  }
}

Use assets from the Angular library in the application

1 Answers1