Read it in 8 Mins
Is by Doing
In this Article we are going to talk about Libraries in Angular 13. We will be covering the following topics in the blog:
Angular 13 is the latest version of the Angular family. Angular applications are basically designed for Single Page Applications, where all controls are required in single-page architecture. Angular is an application-based design framework, which provides the Cross-Platform development environment for creating the most sophisticated Single Page Applications (SPAs). These SPAs are efficient enough for giving us a component to view the model environment, making it an MVC or MVVM application.
Angular provides a Progressive Web App architecture, which means that an application made in Angular gives us an App-like experience with high-performance. Angular has zero-step installation, making its up-gradation using modern web capabilities possible, even if offline. Angular has the capability of making a cross-platform Desktop App that can be created using MAC, Windows, or Linux OS using the same Angular methods. Angular can be rendered in Node.js, Microsoft .Net, PHP, and many other servers by giving the output in HTML-CSS format. This even optimizes the App for SEO. Angular framework turns our templates into JavaScript Virtual machine codes which are highly optimized. With Angular CLI, the Command-Line tools, we can build and deploy Apps faster than ever before. Angular uses Karma for unit tests and Protractor for scenario tests making the applications made in Angular more stable. Check out the Full Stack Developer online course for more information.
Know more about angular cli.
According to angular.io, some of the features worth mentioning are:
1. DEVELOP ACROSS ALL PLATFORMS
2. SPEED & PERFORMANCE
3. INCREDIBLE TOOLING
4. LOVED BY MILLIONS
A Library in Angular App is a reusable code that determines Angular components, services, or projects meant to be called by other projects. These projects are like a normal application. The only difference these have over Angular applications is that these projects cannot execute on their own. We need to import these projects to use them.
We make libraries to solve some generic issues like the unified user interface or data presentation or data entry issues. Angular developers create these libraries for such general-purpose solutions. Later these libraries can be adapted in different applications for re-usage of the solution.
An Angular Library can be built as an Angular application, later published as an npm package. These npm packages can be shared with different applications deploying the libraries.
Libraries can be published as third-party libraries or Angular Team libraries.
Some of the examples are:
To advance your career in web development, enroll in learning Web Development course.
Let us build a Library in Angular App step-by-step:
Step 1: Install Node.js:
Step 2: Use npm to Install Angular CLI
npm install -g @angular/cli
Or
npm install -g @angular/cli@latest
Or
Step 3: Create an app called ngApp4Library
Syntax:
ng new app_name C:\>ng new ngApp4Library
It asks for
Would you like to add Angular routing? Yes
Which stylesheet format would you like to use?
> CSS
….
Step 4: Generate Library via CLI:
Syntax: for creating a Library
ng generate library <name> [options] ng g library <name> [options]
ng generate library my-lb
Step 5: Edit the library ts file: Give a functionality to your library
As you can see our library has its own module, service, and component. We can add more components, services, directives, pipes, and modules as per our needs.
The Library file that we need to edit is my-lib. It appears in the folder C:\Users\ISHU\Desktop -> ngApp4Library -> projects -> my-lib -> src -> lib. The file to be edited is: my-lib.component.ts
Add the following code:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'lib-my-lib',
template: `
<form method="post">
<div >
<label for = "username"> <b> Username: </b> </label>
<input type = "text" placeholder = "Enter Username here" name = "username" style = "margin:10px;" required>
<br/>
<label for = "passwd"> <b> Password: </b> </label>
<input type = "password" placeholder = "Enter Password here" name = "passwd" style = "margin:10px;" required>
<br/>
<button type = "submit"> Login </button>
</div>
</form>
`,
styles: [
]
})
export class MyLibComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}Creating a New Library
1. Build the library and consume it in the same application:
ng build <library name>
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MyLibModule } from 'my-lib';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
MyLibModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }<lib-my-lib></lib-my-lib>
2. Rebuild the library and consume it from some other application:
We go through the following steps to implement the Library into another project:
Step 1:
ng build <library name>
ng new ngAppClient
App.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MyLibModule } from 'my-lib';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
MyLibModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
<lib-my-lib></lib-my-lib>
ng serve.
ng serve --port 5200
We publish the library to make the library available on npm. For publishing the library, all we need to do is create a production build, and then run npm publish command from the library project’s dist directory.
The Syntax is as follows:
ng build <library name> --prod cd dist/<library name> npm publish
Here the Library project is ngApp4library, and the library is my-lib, so we run the following commands:
ng build my-lib --prod cd dist/my-lib npm publish
If you have not published anything before, you will need to create an npm account first and log in into your npm account and then publish your library.
Angular Libraries are very useful in case we want to re-use components, services, modules, etc. in our application. We just need to add the published library in our project, and that’s it, the components, modules, services, are all ready to be used in the application.
To create a library, we generate it by “ng generate” command, built it by “ng build” command, publish by “npm publish” command. To use a library we install it by “ng i “ command.
| Name | Date | Fee | Know more |
|---|
