Angular 8 Libraries

Angular libraries are built a solution of general problems like presenting a unified user interface, presenting data, and allowing the data entry. Developers can create standard solutions for particular domains that can be adapted for reuse in different apps. These solutions has been built as Angular libraries, and the libraries can be published and shared as an npm package.

The Angular library is an angular project, but it differs from the angular app in terms which cannot run on its own. It is imported and also used in our app.

Angular libraries Usage

• Angular libraries expand Angular's base functionalities. For example, if we want to add reactive forms to an app, and the library package using ng add @angular/forms, then we can import the Reactive Froms Module from the @angular/forms library our application code.
• Angular Material is an example of an extensive, general-purpose library that provides sophisticated, reusable, and adaptable UI components.

Installing libraries in Angular 8

Libraries are published as npm packages and unified with the Angular CLI (Command Line Interface). To united reusable library code into an application, we have to install the package and import the provided functionality where we use it.

Syntax

ng add

The ng add Command use the npm package manager to install the library package, an instance that is included in the package to other within the project code, such as, adding import statements, fonts, themes, etc.

Library typing

Library packages include typing in d.ts files. If our library's package does not involve typing and IDE shows an error, we have to install the library’s associated @types/package.

For example, we have a library named d1:

npm install d1–save
npm install @types/d1--save-dev 

types defined in a @types/package for a library installed in the workspace added to the typescript configuration for the Project that uses the library looks for types in the node_modules/@types folder, so we don't have to add each type package individually.

If a library doesn’t contain typing at @types/, we can still use it by manually add typings for it. You can do it by the following:

Create a typings.d.ts file in our src/folder. This file is automatically included as a global type definition.

Add the following code in src/typing.d.ts.

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

Add the given code in the component or file that uses the library:

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

Updating libraries in Angular 8

We can update the libraries by using the ng update command. It updates individual library versions. The Angular CLI has checked the latest published release of the library, and if it finds the latest version is updated than our installed version, download it and update the package.json to match the latest version.

Syntax

ngupdate 

Adding a library to the global runtime scope

We have to configure the CLI to do this at build time using the “scripts” and “styles” of the build target in the CLI configuration file, angular.json.

For example, to use the Bootstrap 4 library, first install the library and its dependencies using the npm package manager.

npm install Bootstrap --save

Add the Bootstrap CSS file to "styles" array:

 “styles”:
 [
 “node_modules/bootstrap/dist/css/bootstrap.css”,
 “src/styles.css”
 ], 

How to create new libraries in Angular?

We can create and publish our new libraries to extend Angular Functionalities. It is generally used when we need to solve the same problem in one app, and we have a candidate for a library.

We can create a button that sends users to our company website that should be included in all apps that our company builds.

Open Angular CLI and write the following syntax to create a new library.

Syntax

ng generate library my-library

It will create a projects/my-lib folder in our workspace, which contains a component and a service inside a NgModule. The workspace configuration file angular.json 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",
... 

Now, we can build, test, and lint our Project using the following commands:

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