Creating Angular Module and Deploy it to npm

Building Angular web application is fun and easy. Angular application is build from modules (at least one) and each module has components and services.

One great thing about modules is that you can build your own module as unit of reuse and then deploy it to one or more package managers like npm.

While building a web application, you can download, install and easily use modules that provide common services (http , routing, xml, …) and useful components (Grids, smart controls, useful pipes and more)

In this post i will go over the process of creating a new module with services and components , deploy it to npm and use it in other application:

To start lets create a new angular application

You can use the application module or delete it and create a new one:

Now create a simple service:

With simple test method:

Create a simple component:

And simply change its template:

Now declare the service and the component in the module class decorator:

You should export the components (add to exports array) and provide the services (add to the providers array)

Thats it – we finished with our featured module now we need to make some more steps to deploy it to npm:

Adding to git and github

The project is already has a git repository (generated by Angular CLI)

Open a new repository in github and push the project:

Install all requirements and add –save to update package.json file


Publish to NPM

Open an account in

Set the following settings:

Add a file index.ts to the root directory and export the module, the service and the component:

Note that you can deploy it without the source code (typescript) using ng build command

To connect to your npm account type:

Edit the package.json file, set the version and set private to false:

After each change update the git and the github:

to deploy type:

every time you deploy the package you need to change the version and for release add a tag:

Testing Your package:

Create a new Angular Application

Install our package using npm:

Now, declare the imported module – SimpModModule in your app.module.ts:

Now you can create an instance of the service and use it and also can add the component using its selector:

Module dependency

If you want to import the module to your app.module , you need to import the components and also the services but if you import it for child (featured module) you don’t need the services because if the service will be provided by more than one module, you’ll get an error

For that reason it is a convention to declare a method forRoot() in the module class to return the service provider:



If you want to use the module in the main app.module call forRoot:

If you need only the component, or want to import the module in a child featured module use only the module name:

You can see the code here, or test it using npm install



Leave a Reply

Your email address will not be published. Required fields are marked *