Angular 6 – Create a module that can be installed with npm

Maxim van Veen
21-09-2018

It may happen that you want to create a module that you want to use in multiple applications. Or that you’re planning to build something that you want to share with other developers.
So to give you an example. Let’s say you want to build a wysiwyg editor or a date & time picker and use it in different projects.

Building a module once and copying it to other projects probably isn’t the best way to achieve this. When you’ll find some bugs or want to change something in your module, you’ll have to copy the module to all the projects you’ve used it in again.

Luckily Angular CLI 6 has a solution for this, which is libraries.
With Angular CLI 6 you can quite easily create a library that you can publish on npm or store in Git and install it into your Angular project from there.

So how do I do that?

First of all check if Angular CLI is installed on your computer and what version it is. This is a feature in Angular 6 so make sure your Angular CLI version is minimal 6.
It doesn’t mean that this isn’t possible in older version of Angular.

If you’re working with an older version of Angular and you want to create a library, you can use ng-packagr for that. It basically does the same since Angular CLI 6 also uses ng-packagr but you’ll have to do more actions manually.

Create new app

If you don’t have an application where you can create a library in, you’ll have to create one by running ng new appname.
Change directory into the app folder. cd appname.

Create library

Next step is to create the library files. Do this by running ng generate library library-name.

This will create a folder “projects” in the root folder of your project. Inside the “projects” folder will be a folder with the library name you chose.
In this folder you’ll find a “src” folder with a “lib” folder. In this “lib” folder you’ll find a component, a module and a service file.
If you want the html and css as seperated files you can create a library-name.component.html and a library-name.component.css file.

And change the

template: `
    <p>
      library-name works!
    </p>
  `,
  styles: []

to

  templateUrl: './library-name.component.html',
  styleUrls: ['./library-name.component.css']

Make the package look and behave the way you want it to be

Now it’s time to create what you wanted to create in this library.
Build the HTML, style it with CSS, write JavaScript.

Build the library

When you’ve built and styled something in your library and you want to see the result you have to build it with ng build library-name.
This will create a folder with your library in the dist folder that you can import into app.module.ts.

You’re app can never use your library before it’s built. If you want this to happen automatically, Angular 6.2 has a --watch functionality that watches the files and build the library when you’ve changed something in the files. ng build library-name --watch

Import the library into your app

Import your library into app.module.ts.
Do this by adding import { libraryNameModule } from 'library-name'; and add libraryNameModule to the imports array.

You don’t have to specify the path to the location of the files. Just fill in the name of the library.
This works because when you ran the command ng generate library library-name, the Angular CLI also updated the tsconfig.json in the root folder of the project with the paths to the library in the dist folder.

When your library is as you wanted it to be you can build it again but this time with thie --prod flag, so ng build library-name --prod. The --prod flag will clean the build directory. Removes old code from previous versions.

After you’ve built it with the --prod flag you can publish your library.
If you want to publish it on npm, create a npm account if you don’t have one already and use:

cd dist/library-name
npm publish

If you want to store it in Git en install it into other project from there. Then put the files inside the dist/library-name folder on git. After that you can npm install the package using: npm install git+ssh://git-ssh-url-to-repo.

After installing it with npm you just import it the same way as discribed above. Just import the libraryModule from the name you gave your library.
import { libraryModule } from 'library-name'; and add libraryModule to the imports array of app.module.ts.

You don’t have to update your tsconfig.json in this case. Angular CLI will look for a mapping between library name and location on the disk.
Angular CLI first looks in the tsconfig file for paths and then looks in the node_modules folder. And because we’ve installed it using npm it will be in the node_modules folder.

LEAVE A REPLY

2 Comments

you might also like