Angular keeps on evolving with great stuff over the passage of time. One of the key feature in angular 6 is the inclusion of multiple projects within single work-space. This has opened options to create a modular project in much organized architecture. Less coupling & re-usability to the next level.

Angular library can be a set of components, views and styles all packaged up in the single exportable unit. This has been possible thanks to ng-packagr and great community work.

This will also allow you to enhance your application in incremental upgrades. More on this later…

So there are several benefits, will discuss them in another blog post. With this much said, lets get going and create our first angular 6 library.

In your newly created angular 6 project, try this new command to create an angular library.

ng generate library material-message-box

This will set up several things in your existing project. Will make a work-space for you. (which it basically does by-default, if you never bothered like me before)

Once CLI completes adding new project in current work-space, your project structure will look like this.

All your existing code still lives in ‘src‘ folder, whereas the new library is added in the projects directory

We can see that angular.json, package.json and tsconfig.json has been updated in our project. Let’s take a sneak peek into these files to see what happened here.

If we differentiate this file with the last state, there’s a new json object with our project name “material-message-box”, which reside just above the default project. So there goes all the configurations of our library.