Angular - publishing library to npm

Modular angular app

I tend to teach a lot of software engineers, and I always repeat the same mantra...
a good software engineer is programming for tommorow
What I mean by that is that the problem we are solving today might repeat and be an exact problem we will be facing tomorrow, so the idea is to keep thinking: "Will I ever need to use the code I'm writing again?"
If the answer is YES, it probably means the the code you are writing should be in a module, with similar code for solving similar issues from the same logical family, and this should be easily installed via npm with a simple: npm install <my-package>
The new angular cli is built to easily create new libraries, to easily work in a mono repository way, and to easily open new projects.

What is mono repository

"mono repository" or "multi repository" refers to the organization of the repositories.
Mono repository means to arrange all your source code under one repository, which means a new developer arrives he just clones the whole repository and he has all the project code.
Multi repo means opens a new repository for each project, which means easier integration with freelance developers as well as easier integration with CI tools.
Large companies like Google and Amazon tend to choose the mono repository approach which also allows me to set up dev environment once for all the projects, like testing environment, code compile, etc. instead of bootstrapping my projects again and again.

Angular cli

The new angular cli directs us to a mono repository approach where all our angular projects and libraries are in one location.
Angular modular architecture along with the new ability of the cli to create libraries will encourage us to publish our packages and create libraries published to the community npm and also published privatly on our own npm.
This guide will try to explain about the proper way for publishing your npm packages.

Scoped packages

Scoped packages allow you to put a prefix folder for your npm packages. This enables you to place an organization prefix for your packages, for example nerdeez scoped packages are named @nz/<package-name>
What is it good for? a package is identified by name and version and scoped packages allows you the ability to grab a prefix that the community won't be able to grab names from. This means that while angular-forms is a name which will probably collide with another package,
the package @nz/angular-forms for sure will be free.
You can also set that all packages with your organization prefix will be pushed to a private repository while packages without the prefix will be pushed publically to the community repository. By default scoped packages are private.

New Angular App

Create a new angular application with the command:

        
            ng new angular-workspace
        
    

Create a new library to your project by typing

        
            ng generate library @nz/forms
        
    

Replace with your organization prefix, and with the package name.

Verdaccio

Verdaccio is an open source lightweight private npm registry.
It easily installed, and can backup the packages to S3, it can also proxy to npmjs if package is not found and save in cache the package for faster future installation.
You install the package with npm:

        
            npm install -g verdaccio
        
    

Now you can run verdaccio by typing

        
            verdaccio
        
    

Our private npm install now running on http://localhost:4873
We need to create a user for our registry with the command:

        
            npm adduser --registry http://localhost:4873
        
    

After creating the user you can now publish the package, but first let's build our package

        
            ng build --project @nz/forms
        
    

Now our package build is located at: ./dist/nz/forms
cd to that directory and type to publish:

        
            npm publish --registry http://localhost:4873
        
    

.npmrc

We can tell npm that our scoped packages will be grabbed and published from our private registry, while all the other packages will be grabbed and published from the public registry.
We can place in our project root an .npmrc file which we will push with our project to make sure all developers npm config are synchronized. How npm works, from the folder the npm command is invoked, npm will traverse back until it finds a configuration file, and the first file it will find that configuration will be chosen. So placing a configuration file in the root of the project means we can make sure our configuration will affect the entire project.
So to set our npmrc file to use our private registry for the scoped packages we can modify it to this

        
            //localhost:4873/:_authToken=$NPM_TOKEN
            @nz:registry=http://localhost:4873
        
    

now we can publish our package again and we can browser to http://localhost:4873 and see our package. We can also know that all users are publishing our scoped packages to npm

Summary

To summerize having a private npm in your organization is a crucial step for the organization to start thinking in a modular way and start coding for tomorrow