I recently had an ideal opportunity to explore Angular due to my work being centred more on frontend.

In any project, what we look for, is simplicity. What if we can separate the components in one big project into several projects and reuse them as libraries? Of course there are already components for that; therefore in this article it will be discussed about reusing components in several projects rather than in a single project.

 

Library

A library is a great way to share content/solutions with several apps. This can be used to extend Angular functionality. I shall now explain my experience on how I used Angular library to share/ reuse information.

 

1. Creating an Angular library

2. Creating an Angular app to use the library

3. Publishing the Angular library

4. Pack the library on another app

 

Creating an Angular Library

ng new [app-name] --create-application=false

create-application=false will avoid all the other files in order to render angular full application and
create only the skeleton we need for the angular library. We can call this “the angular workspace”.
Multiple projects can be generated within this.  

 

 

It has few files to start with.

 

 

Let’s generate the library now.

 

ng g library [name-of-the-library]

 

This will generate the files which we want to create a library with.

 

 

New files will be in a new folder called “Project”

 

 

Component, Module, and Service files are available inside the lib folder under src. That’s where the logic and view should be implemented. If you are wondering why the service file is not included in “Module”, it’s because having it "in-provided" is now the best practice. There are specific services in the same specific folder.

To test the library I will use a normal Angular application.

 

 

Creating an Angular app to use the library

ng g application [name-of-the-application]

 

 

This should be a normal Angular application. Since we didn’t bootstrap the library, it can’t be “served”. Therefore I use this normal Angular application as a workspace for my library.

To serve the application instead of the library, we can specify the appreciation to RUN in the command.

ng serve [name-of-the-application]

 

 

 

Publishing the Angular library

To use the library inside the application, we have to build the library first.

ng build [name-of-the-library]

 

Once built, it creates a dist folder which includes the built files compatible to ES5, including modules, bundles etc.

 

 

 

These files can be exported in different ways. Let’s include this in the project and check how we can see the output. I will be adding the library module to the application’s module file and add the library selector in the application’s view template.

 

 

Then, we can serve the file again and see whether the created library works inside the application.

ng serve [name-of-the-application]

 

 

Important — Please note that we need to rebuild the library after changes. For that you may use a shortcut in the package.json.

"scripts":
{
"ng": "ng",
"start": "ng serve",
"build": "ng build",
....
...
"test-lib:build":"ng build test-library"
},

 

Important - There is a file called public-api.ts. To create the library functioning, actual classes we used must be mentioned. 

/*
* Public API Surface of test-library
*/export * from './lib/test-library.service';
export * from './lib/test-library.component';
export * from './lib/test-library.module';

 

 

Pack the library to use in another app

It’s time to pack the library. To use this library as a npm package, we need to bundle everything together and zip it. There is an API to do so in npm.

npm pack

We can use it in the package.json as a shortcut for the application.

"scripts":
{
"ng": "ng",
"start": "ng serve",
"build": "ng build",
....
...
"test-lib:build":"ng build test-library"
"test-lib:pack": "cd dist/test-library && npm pack"
}

 

 

This will generate the tgz file which is a single file consisting of everything with regards to the library.

 

 

Therefore if you plan to use this in another project you could install this tgz file a npm package.

npm install [path-to-the-file].tgz

Hope you learnt something from this article. Now you can also try to build an app and make the project simpler with custom libraries.

---

---