How to Create Library in Angular Tutorial

In this tutorial article, we’ll learn how we can create a library using Angular 9 and use it into the different Project.

Prerequisites:

1. Prior knowledge of TypeScript.
2. Prior knowledge of JavaScript.
3. Visual studio code.
4. A development machine with Node 11.3 + & NPM 9.1.7+ installed.

Step-by-Step Tutorial of Creating Library using Angular 9

Step 1: Installing Angular CLI

First step, where we’ll have to install latest version of Angular CLI.

$ npm install -g @angular/cli

Step 2: Creating your Angular 9 Project

• In this second step, we will use Angular CLI to start our Angular Project
• Go to CMD or Terminal and use this command:

$ ng new custom-loader

• This CLI will ask you “whether you would like to add Angular routing?” Say Yes.
• It will ask “which stylesheet format you would like to use?”. Choose CSS.
• Now your project is ready Angular CLI will generate required files and folders along with NPM packages and routing too.
• Now open your project in Visual studio code and go to your root folder and run the local development server using below command:

$ npm start

Now run localhost:4200/ in your browser.

Step 3: Create Library

library command followed by your library name is used to create library

Use this command

$ ng generate library my-lib

That will be created a library project into the our demo project.

Library having library module, services, components, etc.

Step 4: Make a functionality into your library.

• As you can see in image, library has it’s own module, service and component. We can add more components, services, directives, pipes and modules as per or need.

Here taking a login module as an example.

Step 5 : Build and consume Angular library.

Now, let’s see how to build the library, publish and consume it in our application.

• Here I will show you how to consume library in same application(my-lib) which we created above. This is simple way to consume library and it works locally.
• To Build library run ng build command followed by library name. Here our library name is “my-lib”.

• After build successfully we can get 2 paths.
• This will generate library dist folder.

Step 6: Implement library into current project

• Import this library in our main app(Demo-lib).
• In app.module.ts import library module as below.

• After this import selector tag of library in app.component.html file to load library as below image. To find selector tag of library open projects/my-lib/src/lib/my-lib.component.ts file, where you can get selector inside @component decorator.

Step 7: Implement Library into another project

• Create a new project,
• Here we are create a new project use-lib.

• Build Library and get path from demo-lib project.

• Copy a path “to: E:\Demo\demo-lib\dist\my-lib“.
• Open the terminal of use-lib project.
• Install this library with this command into the use-lib project.

• After installation of library.
• Import a library into the app.module.ts

After importing the library module we can easily use that services, components etc.

• Here we’re importing the selector tag of library in app.component.html

• Now Here we’re run this project with the different port

• Demo-lib project running on default port 4200

OUTPUT

• Run – Created Library Project

• Run – Imported Library Project

Over To You!

Looking for a Sample Source Code? Here you go: GitHub.

That’s it for now. Today you have learn how to load multiple dynamic content in one Page using Angular 8.

If you’re dealing with large-scale applications or enterprise software, it is beneficial to get expert help. Get in touch with Samarpan Infotech and hire dedicated Angular developers with at least 5+ years’ experience developing enterprise software.

Related Angular Development Resources

• Custom Credit Card Validation in Angular
• Angular IE Error: Uncaught (in promise) Loading chunk
• How to Load Multiple Dynamic Component in Page using Angular
• How to Load Dynamic Div HTML Content using Angular
• How to Create Subscribe Custom Alert Services using Angular
• Create Custom Dynamic Loader on HTML Element using Angular
• Angular: Create Dynamic Form with Controls & Validation