Create angular apps with shared library

Pushpak K — Tue, 30 Mar 2021 06:06:40 +0000

Once, a wise Front-end developer was developing applications, one for his customers and the other was for their customers. He decided to go with Angular Framework which provides great support for Multiple applications with a shared library so he can reuse the same components.

Let's see how he saved his time by creating reusable components with one shared library and 2 applications.

Create Angular workspace

ng new my-library-workspace --create-application=false

This command creates an angular workspace without creating any app along with some config files.

Generate angular library

ng generate library my-library

Remember to run upcoming commands from your workspace folder.

This command creates an angular library and makes an entry in angular.json which is generated previously.

All the applications and library created will be placed under the projects folder in the workspace.

Updated angular.json looks like this

It creates entry for library under projects key. Important keys are

"projectType" is library
"root" is path to library folder
"sourceRoot" is src folder path in your library
"architect" property holds an configuration object for build, test and lint.

All this is for the library in the project.
Other important commands

ng build my-library --prod // build production version of the library 
ng build my-library --watch // watch for any changes in library and build after changes are saved

Even you can publish your library on npm. Check out Angular's official document here

Few things to consider to make library components reusable. Check out here for more.

Another important file from library is /src/public-api.ts. Every component, service, the module you create in the library should be exported from this file. When angular imports any library component, it internally searches in this file.

Generate application

ng generate application my-application

This command creates an application within your workspace that can access your library components. It asks you series of questions before creating an app like do you want routing in the app, which CSS preprocessor you would prefer.
After creating an application, angular CLI makes an entry of the application inside angular.json similar to the library. There are key differences in the application configuration.

"projectType" is application
"architect" object has build, serve, extract-i18n, test, lint and e2e configurations
You can configure various parts for your build process.

How to use the library in app?

Just import your library in your application modules where you are using the library components.

import {module_name} from my-library;

Make an entry of imported module in application modules imports array.

In the same way, you can create multiple applications which can use the same library and configure the separate build, serve processes individual to each application in angular.json.

Find more details on angular.io.
Reference Links
https://angular.io/guide/libraries

DEV Community: Pushpak K

Create angular apps with shared library

Create Angular workspace

Generate angular library

Generate application

How to use the library in app?