Angular libraries are built as a solution of general problems such as presenting a unified user interface, presenting data, and allowing data entry. Developers can create general solutions for particular domains that can be adapted for re-use in different apps. These solutions can be built as Angular libraries and these libraries can be published and shared as npm packages.
An Angular library is an angular project but it is different from the Angular app in the terms that it cannot run on its own. It is imported and used in the app.
Usage of Angular libraries
Libraries are published as npm packages and integrated with Angular CLI. To integrate reusable library code into an application, we have to install the package and import the provided functionality where we shall use it.
The ng add command uses the npm package manager to install the library package, and invokes schematics that are included in the package to other scaffolding within the project code, such as adding import statements, fonts, themes, and so on.
Library packages include typings in .d.ts files. If your library's package does not include typings and IDE shows an error, you have to install the library's associated @types/
For example, suppose, you have a library named d1:
Types defined in a @types/ package for a library installed into the workspace are automatically added to the TypeScript configuration for the project that uses that library. TypeScript looks for types in the node_modules/@types folder by default, so you don't have to add each type package individually.
If a library doesn't contain typings at @types/, you can still use it by manually adding typings for it. You can do it by following:
Create a typings.d.ts file in your src/ folder. This file is automatically included as global type definition.
Add the following code in src/typings.d.ts.
Add the following code in the component or file that uses the library:
You can update the libraries by using ng update command. It updates individual library versions. The Angular CLI checks the latest published release of the library, and if it finds that the latest version is newer than your installed version, downloads it and updates your package.json to match the latest version.
Note: When you update Angular to a new version, you must ensure that any libraries you are using are current. If libraries have interdependencies, they also must be updated.
How to add a library to the runtime global scope
For example, to use the Bootstrap 4 library, first install the library and its dependencies using the npm package manager:
Add the Bootstrap CSS file to the "styles" array:
Creating new libraries
You can create and publish your own new libraries to extend Angular functionalities. It is generally used when you need to solve the same problem in more than one app (or want to share your solution with other developers), you have a candidate for a library.
For example: You can create a button that sends users to your company website that would be included in all apps that your company builds.
Open Angular CLI and use the following syntax to create a new library.
This will create a projects/my-lib folder in your workspace, which contains a component and a service inside an NgModule. The workspace configuration file, angular.json, is updated with a project of type 'library'.
Now, you can built, test and lint your project using the following commands: