Adding css assets to Angular Library

And use them in your app.

This small article is adding content to the previous one :

Add schematics to Angular library

The starting point is now a library in which we have ng-add schematics. You need to have a workspace with a library as described in this previous article.

The goal

We want to add css / scss functionalities to our library, and expose assets to our main application. So we will have to :

• Create scss file in our library
• Create an image in our library
• Build the scss
• Configure the build of the library to export our assets
• Configure the final application to handle these assets

The library

In our library, lets’s create a /styles folder, next to /src, or inside it. This will contain sources, like scss files. Then we will create an /assets folder, that will contain compiled css files and other files like images, to be used in our templates or in the css itself via url() syntax.

/styles and /assets folders

The scss is very simple, it uses an exixting css, and importing some variables :

The theme.css file is also very simple, it’s referencing an image :

In the template of one of the components of our library, let’s add the image, that will be displayed with the /assets reference :

Build the scss in the Angular library

Let’s create a simple script in our library package.json :

"scripts": {
   "build:sass": "sass styles/styles.scss assets/styles.css",
   "build:schematics": "tsc -p tsconfig.schematics.json",
   "postbuild:schematics": "copyfiles schematics/collection.json ../../../dist/aboudard/ng-lib/"
},

This script will build the css in our assets folder, this way it will be simple to reference the image in the css and the url() will be correct.

Now we need to tell the library builder it needs to export the assets, in the ng-package.json :

{
   "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
   "dest": "../../../dist/aboudard/ng-lib",
   "lib": {
      "entryFile": "src/public-api.ts"
   },
   "assets": ["./styles/*.*","./assets/**/*.*"]
}

After the build of the css, let’s build the library, and we should see the content in the dist folder like this :

The theme.css file could be left in the sources, since it’s content can be used directly, and the .map file would be only relevant if we ship the scss sources also, in which case, we can add the /styles folder in the assets config of ng-package.json.

Use the assets in the Application

Lets create a new application and install the library

ng new myApp
cd /myApp
ng add @aboudard/ng-lib
npm run start

Then we simply call the css of our library in our main styles.scss file :

If we do that, and try to use our assets in our code like that in the app.component.html :

We will have the styles imported, but the images won’t show up :

Reference the assets of the libary

Now we know that the assets are exported in our library, we just need to reference them through the node_modules, and they will be compiled by the Angular builder. So, in the angular.json file of our new application, let’s just add the assets :

Now the image should display, both with image tag or with the css url() config.

This is a very simple example, not much code, but enough to organise our resources in the library and use it properly in our Angular application. You can find the source code in the github repo.

GitHub - aboudard/ng-library-schematics: Basic configuration of Angular schematics in a library

Reference

Check this article that introduces the angular.json assets configuration :

Create Nx Libs with Assets