It’s been 3+ years I am working on Angular, from AngularJS to Angular 8 I have served my expertise on different projects of Angular meanwhile, I have used many different third-party packages(libraries). But each library has its own interface.
If you want to extend that library features by creating your own library, thanks to the Angular team as they provided the features to build your very own library.
I am writing this blog to make you understand how you can create your own project library.
Table of contents:
(3) Create your own Angular Library
(4) Generate library build
(5) Understanding the Project Library structure
(6) Test Project Library into Application
Getting started :
The version I have used for this demo:
Note: In case if you have not installed the AgularCLI, then I would like to request you to open a terminal and type.
npm i -g angular-cli
Angular CLI helps to create a new workspace for us at the time of using `ng new`
In our workspace, we will have two projects:
- A library project
- An application project
It is the library of components and services that we want to provide. This is the code which we will publish to npm, for example.
It will be only used to create Angular component library; Sometimes, it can be used as documentation and example usage of library.
- Create a new workspace with name `ng-components-app` using Angular CLI
- ng-components-app is the test application for testing our library: ng-components-lib
- Generate Angular library with named:`ng-components-lib` using `ng g library ng-components-lib` command
- Our Generated library will have the prefix of uic to identify of our library.
- For testing our library ng-components-lib, We will import ng-components-lib as
- After completing the above steps, we will generate project build and then use the library into another angular project
a library into our ng-components-app application.
Create an Angular Library:
Now let’s create Angular Workspace and then create the project Library by using the below command:
ng new components-app --style=scss --create-application=false cd components-app ng g library components-lib --prefix=uic
Notice: we used the –prefix flag to make our library components to be distinct. If we do not use it, then Angular CLI will take `lib` by default.
ALWAYS: keep the habit of using a prefix when generating a project library.
Now, let’s understand what generated library command will do:
- Will add a new `components-lib` project in angular.json file.
- Will add `ng-packagr` dependencies to our package.json
- Will add a reference to the `components-lib` build path in tsconfig.json
- We will create sources for our library in `projects/components-lib` folder.
The `projects/components-lib` folder inside our application contains a component and a service inside a NgModule. Our Application’s angular.json is updated with a project of type of ‘library.’
Updated angular.json of components-app after Generate Library
Let’s get the knowledge of the key elements of “projects” to generated in angular.json :
Root: It points to root folder of our library projects.
Sourcebook: It points to the root of our library’s actual source code.
project-type: It specifies this is a library as opposed to our other two projects, which are of the type: application.
Prefix: The prefix identifies that we will use in the selectors of our components. Remember, we specified ‘uic’ when we generated the library.
Architect:It specifies how Angular CLI can handle build, test, and lint for our project. In this section, the builder makes use of ng-packagr for building.
The dependency of ng-packagr in package.json
When we start to generate the library, Angular CLI realizes that it needs ng-packagr. So, `ng-packagr` added into our devDependencies in our workspace package.json: “ng-packagr”: “^4.1.0“,
Understand `components-lib` Library sources:
In library “Project” folder, Angular CLI created a new module with a service and a component inside the “projects/components-lib/src/lib” folder. Also, there we can see another few more files:
This is called the entry file. It determines what parts of our library are visible externally. In our application, we will export only our library parent module: `ComponentsLibModule`
This package.json file exists inside /projects/components-lib` folder specially for our library. This file will get published with our library as an npm package. When developer install our library using npm, it will install the dependent packages which specify in package.json
configuration file of ng-packagr
Now we will export the library parent module `ComponentsLibModule` in public_api.ts file. And after then we will import it to our application `src/app/app.module.ts’ file for testing.
How to Build our Library
Let’s create build of newly generated library by using below command:
ng build components-lib It builds our library to the folder: components-app\dist\components-lib
Testing Library in Application
We have created a workspace with name `components-app,` which will now use to test our generated library.
Now we want to test our generated `components-lib` library is working successfully or not. For that, we will import `components-lib` as a library into our `components-app` application.
Import Library Module into the Application Module
Here we will display the default component that Angular CLI created for us in the library that is `components-lib.component.ts` file.
In `components-lib.module.ts,` exports the `components-lib.component.ts` file.
Now, Import `ComponentsLibModule` inside `src/app/app.module.ts’ file as per the below screenshot.
Note: we should have to export the `components-lib.module.ts` file from `public_api.ts` file
For Example, open `public_api.ts` file and export library module as per the below-mentioned code:
export * from ‘./lib/components-lib.module’;
Displaying the ‘components-lib’ Component
We are going to add the default generated component from our library into our AppComponent template: app.component.html (Main Application Component)
Please fo through the app.component.html file and simply put selector of `components-lib.component.ts` file as shown in the below screenshot.
Run an Application
Now simply run the application using `ng command; if it runs successfully that means library project structure has been successfully created.
Excellent. It is running successfully😊 We successfully created an angular library.
Please feel free to comment below if you need any further assistance.
In the next session, We will learn about `How to use Generated library in another Application’.