Skip to main content

How to build an Angular Library to share content among apps

Building an Angular Library as a Frontend Developer

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.  

 

Terminal command executing
1.1 - Terminal command executing

 

It has few files to start with.

 

1.2 - VS-code file structure
1.2 - VS-code file structure

 

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.

 

1.3 - Generating the library
1.3 - Generating the library

 

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

 

1.4 - File structure after creating the library
1.4 - File structure after creating the library

 

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]

 

2.1 - Generating ng application
2.1 - Generating ng 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]

 

2.2 - Serving the ng application
2.2 - Serving the ng 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.

 

 

3.1 - Building the library
3.1 - Building the library

 

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.

 

3.2 - After including the library module to the application’s module
3.2 - After including the library module to the application’s module

 

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

ng serve [name-of-the-application]

 

3.3-Working example for the library inside the angular application
3.3-Working example for the library inside the angular 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"
}

 

4.1-Successfull packing of the library with npm pack command
4.1-Successfull packing of the library with npm pack command

 

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

 

4.2 - Packed file
4.2 - Packed file

 

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.


LEAVE A COMMENT







POST COMMENTS


© 2021 Creative Software. All Rights Reserved | Privacy | Terms of Use