How to create a library and use it angular Application

In this session we will discuss how to create a library in angular application and how to access that library in this application in detail.

First create a angular application by using this command

ng new angular-app

structure of the application

By default in the application app component will be created angular-app/src/ in this path.

Later created 3 new components apis,docs, and videos using this command

ng g component apis/docs/videos(component_name)

app-routing.modules.ts

Add the routes of 3 components in the routing module and add the routerLinks in the top navigation Bar like below.

app.component.hrml

Upto now we have created a application which contains 3 components and added routing to it and we have added the paths in the navigation Bar.

Library creation

Now its time to create a library by using below command

ng g library common — prefix=lib

In this command common is the library name and — prefix=lib here we use prefix flag to create a common library components to be distinct like this lib-common.

Once we use that command library will be created in the Folder Projects/common as shown in the below fig.

app library structure

once the library created followed changes will happen the project files.

1. Adds a new common for our library in angular.json

angular.json file

• In this common "projectType": "library" defines the common is of library type.
• “root”:”project/common” this is our library project’s root folder.
• ”sourceRoot”: “projects/common/src” this points to actual source code path of the library.
• “Prefix”:”lib” what ever the component we create in this library will created with prefix lib.
• architect is object has sections that specify how Angular CLI handles build, test, and lint for our project.

2. Adds dependencies for ng-packagr to our package.json

package.json (angular-app/package.json)

3. Adds a reference to the common build path in tsconfig.json. when we create a build for library it will create dist in this path dist/common/common.

tsconfig.json

4. Structure of the common library

structure of common library

In this common/src/lib consists of the common default component, module,service and spec files will be there.

In the public-api.ts file all the default library service,component and ,module file exported.

public-api.ts

In ng-package.json file entryFile and the dist destination path will be included as shown in the below fig

ng-package.json

5. Create a component in the library

Before creating the component in the library first navigate to path of the library cd projects/common and use the same command we used create in tha angular for component creation.

ng g component input-com

Now all the input-com css,html,specs,ts are created now in the input.component.html file the common input box

input-com.component.html

Now We have to use the library in our application Before using directly we need to install the library npm install common.

By doing this it is going to add the common npm library in package.json and need to import this library module in the app.module.ts file.

Now add the selector of library component<lib-input-com></lib-input-com>in the common.component.html or common.component.ts template.

common.component.ts

Now add the library common component selector in the application app.component.html file <lib-common></lib-common>now this is the result of using library in the application.

output

Finally in this blog we have learned how to create a library and use the library in our angular application.I appreciate spending time on this blog and Hope everyone clear with the concept.