Create an Angular external module in a library as NPM package with router

Start creating the library as described in the angular doc:

ng new my-workspace --no-create-application
cd my-workspace
ng generate library my-lib

☝ Note: If your angular host app is using a version older than the current stable one, you must make sure to generate your library in this old version. The library won’t work if its version is newer than the host angular app.

In this case, you should make sure you generate your angular library using npx:

npx -p @angular/cli@11.2.13 ng generate my-lib

You can find more information on how to generate angular apps with older @angular/cli versions in this medium post.

⌨ How to develop locally

In order to develop locally, you will need to build your library on every change and see its effect in your host angular app. Let’s start with build on every change:

Go to your library root folder and run the command:

ng build --watch

Remember, if you’re using an older angular host app version, you have to make sure to use the right CLI version, see above.

This command created a dist folder with your library in it. You must now create a NPM symlink for the package to be used outside of this project.

Go in the dist/my-lib folder of the library and create a symlink doing the command npm link . You should see the following result (depending on where your lib is located on your computer) :

/usr/local/lib/node_modules/my-lib -> /Users/[YOUR_USER_NAME]/Documents/WEB/my-workspace/dist/my-lib

Now, go in your host app root folder and link it to your newly created symlink like so:

npm link my-lib

Here, NPM knows your my-lib module and should show you the npm links like so:

/Users/[YOUR_USER_NAME]/Documents/WEB/host-lib/node_modules/my-lib -> /usr/local/lib/node_modules/my-lib -> /Users/[YOUR_USER_NAME]/Documents/WEB/my-workspace/dist/my-lib

If you check in your host app node_modules folder, you should see that your lib is in it (VS Code even shows you it’s a symlink with the red arrow on the right).

Now you’re ready to develop!

Define your my-lib module like so:

In your host app, you just need to lazyload your my-lib module:

And voilà! Your lib is lazy loaded in the angular host app. As soon as you make changes to your lib, it’s rebuilt and your angular host app sees the changes and should rerun your server when you’re using ng serve.

⚡How to build your library, push it to NPM registry and pull it in your app

Now instead of building the lib on every change, we will now build it for production.

Go to your lib folder and run the command:

ng build

Go to your dist/my-lib folder and publish by doing npm publish. You can publish it in the NPM public registry or any other NPM registry.

Then if your package is public, you just need to reference it in your package.json and it should work the same.

I hope this article helps you out with the angular library architecture.