Building Component Libraries in Angular

• 

Angular CLI is one of the best tools available for building Angular applications. CLI conveniently allows developers to create new project that have testing, type script transpilation and other things.

With the recent release of version 6, we now have access to tools that can help us build libraries while still taking the advantage of other powerful aspects of CLI, such as schematics, without leaving the workflow we are used to, sounds great isn’t it!

Now we will show you how to get started building your own library component using CLI.

We’ll cover:

• Generating a library project with the Angular CLI.
• Building component for your library
• Using the built library in other applications.
• Publishing your library for other to use.
• Consuming libraries from npm.

Steps for Building Component Library:

Foremost thing is, we need to set up our Angular CLI project. To install the latest version of the CLI install it from the npm.

$ npm install -g @angular/cli@latest

Now create a new project with CLI

$ ng new <my-app>

You might notice a couple of changes in the project structure you know. The most noticeable of which is that the old angular-cli.json is replaced with the angular.json file.

This file is the key to one of the biggest features in version 6. Now Angular CLI can create and work with multiple angular projects. This angular.json file gives you control over the configuration of each of those projects. This is ultimately what makes building of libraries within CLI possible because we need to handle the building libraries differently than we normally would for Angular apps.

Ok – now we generate a library structure in our project. We do this with the generate command as we use to create a new component, service, modules, etc.

$ ng generate library <my-awesome-library>

Ex : ng generate library my-new-library

This creates a new directory called project with a new folder for your library and some example files. The files which we need to consider looking here are /src/public_api.ts, ng-package.json. These files control the configuration for ng-packagr

• public_api.ts is the new entry point for your library. The files that you you want accessable to consumers of library such as components, modules, etc you need to export them here.

Eg : export * from ‘./lib/my-new-library.component’;

• ng-package.json control the configuration for the packaging process that ng-packgr performs. This file is used to defining a entry point to your app.

Along with these two files it will create few more example , you can delete them and create new files according to your convenience.

Now we will set up the module for our library. After deleting the example files that were generated by the CLI in src/lib and from public­_api.ts. Generate the module as show below.

$ cd projects/my-new-library/src/lib

​​​​​ $ ng generate module <my-lib> –flat –spec false

Since we want others to consume this module we need to add it to public_api.ts.

export * from ‘./lib/my-lib.module’;

Now we will go ahead and generate a component for our library. For this example the library will have a component that displays Hello world.

$ ng generate component hello-world

Export the hello-world component

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HelloWorldComponent } from './hello-world/hello-world.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [HelloWorldComponent],
  exports: [HelloWorldComponent]   // export your new awesome component
)}
export class MyLibModule { }

Also add the component to public_api.ts

export * from ‘./lib/my-lib.module’;

export * from ‘./lib/hello-world/hello-world.component’;

You can now go ahead and build your library component and add all the necessary features that you need.

Using your library in other applications:

Yeah, we have an awesome library ready for use – but how do we use it?

You can find tsconfig.json in the root of your workspace. You’ll see a paths option points to a dist/my-new-library directory.

"compilerOptions": {
  ...
  "paths": {
    "my-new-library": [
      "dist/my-new-library"
    ]
  }
}

This means it allow you to automatically use your library, after it’s been built in other apps in the same workspace. Meaning you should always build your library before building your app, and supposed to rebuild it every time you make a change to the library before those changes will be reflected.

A workflow could be

$ ng build <library-name>

$ ng build <app-name>

This is responsible for generating the /dist directory which we mentioned earlier. You can take a look at the files of the dist directory where you will see that ng-packagr has generated FESM2015, FESM5, and UMD bundles of the library for consumption.

Now we are ready to use this library

Now we are ready to use this library

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { MyLibModule } from 'my-new-library';  // add your library module here
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    MyLibModule // dont forget to add it to the imports
],

  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now add the hello-world component in the src/app/app.component.html

<lib-hello-world></lib-hello-world>

Now lets fire our app and check it out, mind you build the library after making changes to the library to reflect the changes and serve the app.

$ ng build <library-name>

$ ng build <app-name>

Open the browser with appropriate port to see the result.

This is one of the great ways to share your code among the multiple Angular apps in the same workspace. Additionally, if you are building a component library you could use the originally generated Angular app to build great working examples for your library.

Publishing your library for others to use:

Now you have built an awesome library and others want to use your library in there applications. This can be done using npm.

If you haven’t published anything on npm, first create your npm account, run the below command and provide the credentials.

$ npm adduser

If you are ready to publish your library to npm for others to use, run the below command inside your dist/my-new-library directory.

$ npm publish

Note : It’s always a good practice to have a unique <library-name> since you’re publishing it globally, there should not be ambiguity.