Angular Libraries

Angular 7 is a TypeScript based open-source full-stack web application. In simple words, it is a Javascript framework that is used to create reactive Single Page Applications (SPAs). Being entirely based on components, Angular 7 consists of various components. Built as a solution of general problems, Angular libraries are used for various problems like presenting a unified user interface, presenting data, and allowing data entry. The general solutions can be adapted for re-use in different apps, though they are created by the developers for particular domains. The general solutions can be developed as Angular libraries. The Angular libraries can be issued and administered as npm packages. Although, it is an angular project, however, an Angular library is different from the Angular app. An Angular library cannot run on its own, but an Angular app can. An Angular library is imported to be used in an Angular app.

Usage of Angular libraries:

The functionalities of the Angular base are extended by the Angular libraries. For instance, to add reactive forms to an app, the library package is first added by utilizing the ng add @angular/forms, after which the ReactiveFormsModule is imported from the @angular/forms library in the application code.
Angular Library can be understood as a large, general-purpose library that facilitates advanced, reusable, and flexible UI components.

Installing libraries:

Angular libraries are issued as npm packages. They are integrated with Angular CLI. Install the package and import the given functionality where it is required to be used, to integrate the reusable library code into an application.

Syntax:

ng add <lib_name>

To install the library package, the ng add command uses the npm package manager. It invokes schematics that are held in the package to other scaffolding inside the project code, like answering import statements, fonts, themes, and so on.

Library typing:

Typings in the .d.ts files are included in the Library packages. Installation of the library’s associated @types/ package is required in case the package of the library does not include typing and the IDE is displaying an error.

For example,

Let there be a library named a1 than to install the library’s associated @types/ package use:

npm install a1 --save
npm install @types/a1 --save-dev

The TypeScript configuration for the project that uses a library automatically adds the Types defined in a @types/ package for a library installed into the workspace. It is not required to add each type of package individually, because by default the TypeScript looks for types in the node_modules/@types folder. Typings can also be added manually in case a library doesn’t contain typings at @types/ by following the steps below:

Open src/ folder.
Create a typings .d.ts file.
The created file is automatically added as a global type definition.

Open the src/typings.d.ts and add the below code.

declare module 'host' {  
  export interface Host {  
    protocol?: string;  
    hostname?: string;  
    pathname?: string;  
  }  
  export function parse(url: string, queryString?: string): Host;  
}

Now, in the component or file that uses the library, add the below code:

import * as host from 'host';  
const parsedUrl = host.parse('https://angular.io');  
console.log(parsedUrl.hostname);

Updating libraries:

The ng update command can be used to update the libraries, and more specifically, the individual library versions. The published release of the library is checked by the Angular CLI. In case, the latest version is newer than the installed version of the library, the Angular CLI downloads the latest version and updates the package.json to match the latest version. It must be ensured that when the Angular is updated to a new version, the libraries used must be current. In case the libraries have interdependencies, the update is a must for them also.

Syntax:

ng update <lib_name>

To add a library to the runtime global scope:

The runtime global scope can add the Legacy JavaScript libraries that are not imported into an app. They can also be loaded as if they were in a script tag. To add and to load the Legacy JavaScript libraries that are not imported into an app, at build time, configure the CLI. It is done by using the “scripts” and “styles” options of the build target in the CLI configuration file, angular.json.

For instance, the library and its dependencies are installed using the npm package manager, to use the Bootstrap 4 library:

npm install bootstrap --save  
The Bootstrap CSS file is then added to the "styles" array:
"styles": [  
  "node_modules/bootstrap/dist/css/bootstrap.css",  
  "src/styles.css"  
],

Creating new libraries:

To extend Angular functionalities, a user can create and publish his new libraries, especially in case the user needs to solve the same problem in more than one app or in case the user wants to share his solution with other developers. The user thus has a candidate for a library. To create a new library, use the below syntax in Angular CLI.

Syntax:

ng generate library new-lib

A projects/new-lib folder will thus be created in the user’s workspace. The folder includes a component and a service inside an NgModule. The angular.json being the workspace configuration file is updated with a project of type ‘library’.

"projects": {  
  ...  
  "my-lib": {  
    "root": "projects/my-lib",  
    "sourceRoot": "projects/my-lib/src",  
    "projectType": "library",  
    "prefix": "lib",  
    "architect": {  
      "build": {  
        "builder": "@angular-devkit/build-ng-packagr:build",  
        ...

To build, test and lint a project:

To build, test and lint a project the following commands can be used:

ng build my-lib  
ng test my-lib  
ng lint my-lib

Please follow and like us: