Moment For Technology

Angular Library learning notes

Posted on Feb. 1, 2023, 5:10 p.m. by Prerak Luthra
Category: typescript Tag: typescript angular angular-material angular4

The original

Use cases for Angular libraries

Angular libraries have two common use cases:

  • Build reusable component libraries to share across applications.
  • Build shared service layer functionality - for example. Clients that handle external data sources, such as APIs.

While there are many Angular libraries that are well suited to a project, it's worth considering whether your use case fits into this category, because it does introduce some maintenance overhead. Remember, you can always write functionality as part of a shared Angular module in your application and extract it into the library if necessary.

Creating an Angular library project

We'll create an Angular library and a demo application that uses the library. We can create these using the following command:

ng new example-component-library --create-application=false

cd example-component-library

ng generate library example-component-library

ng generate application example-component-library-app

Using the --create-application=false flag prevents Angular from creating an application called "example-component-library," which is the name we want for the library itself rather than the test application.

If we now look inside the workspace we just created, we can see that there is a project folder that contains each of the subfolders of the library (example-component-library) and the application (example-component-library-app) that we just generated. There is also a third folder that contains the e2e test projects, which we can ignore.

Build the library separately using the following command line:

ng build --project=example-component-library

If we look at the dist folder, we'll see that our library has been built, and in the build folder, we have a number of different folders containing applications in a variety of different module formats for different consumers, as well as one containing TypeScript definitions.

  • Bundles - UMD Module Format.
  • ESM5 - Mainly uses ES5's module format, but also uses import/export syntax from ES6.
  • ESM2015 - Use the module format of ES2015 / ES6.
  • FESM5 - Flat version of ESM5.
  • FESM2015 - A flattened version of peerDependencies ESM2015.
  • Lib - TypeScript definitions of libraries.

This Format, called the Angular Package Format, is used as the output Format for ng-packagr, the tool the Angular CLI uses to compile libraries.

The project structure of the library file:

First, remove the existing example-component-library modules, components, and service files -- we don't need them.

Next we'll add a component, a pipe, and a directive. We will follow a pattern of adding one component per module - this will allow the consuming application to import only the library modules it is interested in and then tree shaken all the other modules during the build process. I strongly recommend doing this because it does have an impact on the size of the application package as the library grows.

  • ng generate module components/foo
  • ng generate component components/foo
  • ng generate module pipes/bar
  • ng generate pipe pipes/bar/bar
  • ng generate module directives/baz
  • ng generate directive directives/baz/baz

Current project structure:

Best practices:

Each module has one component to allow Tree Shake optimization for unused modules/components.

The exception is that components that are always used together should be kept in the same module - for example. If you are implementing tabs, the TabGroupComponent and the TabItemComponent will be in the same module.

Next, we must add each component we create to its module's export:

We now update public_api.ts to export any files in the library that we want to expose to the consuming application:

Now all we need to do is rebuild it so that it can use the library from within the application.

Consuming our Angular library

The development environment

The best way to use our library during development is to use NPM link. This will allow us to symlink from the directory in the consuming application's node module folder to the compiled application in the library's dist folder.

cd dist/example-component-library

npm link

We can link an Angular project to the library from anywhere on our local machine. From the project root folder:

npm link example-component-library

If we now use the watch flag runtime while running ng serve in another terminal window.

ng build --project=example-component-library

ng serve

This will allow us to develop the application and (one or more) link libraries at the same time, and see the application recompile each time the library source code is modified.

The production environment

For the production environment, we publish our library to NPM and then install it into the application using NPM install.

First, you need to create an NPM account. Now log in from the command line:

npm login

From the project root folder:

cd dist/example-component-library

npm publish

Our package is now published on NPM (public) and we can install it by adding it to our application's package.json dependency and running NPM install:

"dependencies": { ... "Example - component - library", "~ 0.0.1"}

More of Jerry's original articles can be found on "Wang Zixi ":

About (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.