Create angular apps with shared library
Tags: angular, library
Published: 2021-03-30 06:06:40

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.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/laadni9fevobnyggzd4n.png)

##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 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqtcrtflurl0zjnqfi80.png)
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.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lzanr4d1jljo7qr445ze.png)
 
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](https://angular.io/guide/creating-libraries#publishing-your-library)

>Few things to consider to make library components reusable. Check out [here](https://angular.io/guide/creating-libraries#refactoring-parts-of-an-app-into-a-library) 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. 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t5lh097aemw5rbheucjm.png)
* "projectType" is application
* "architect" object has build, serve, extract-i18n, test, lint and e2e configurations
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jfgz6m6hfzb1bum6sqp0.png)
* 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. 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lsxaijqg02gg8wmncy0f.png)
 

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](https://angular.io/guide/libraries)