Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.


    Extract an Angular Module into a separate library with ng-packagr

    Juri StrumpflohnerJuri Strumpflohner

    Angular Modules can be seen as a distributable unit. They group together a set of logically connected code which can be imported and used by other modules within an Angular application. However, if you want to share them across multiple applications, you have to extract, package and distribute them accordingly. In this lesson we will learn how to extract an existing module and to use ng-packagr in order to bundle it according to the Angular Package Format.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    Instructor: 00:00 I have to use the Angular CLI here to generate a new application which consists here of a very simple structure actually.

    00:06 We have here the app module which imports here a so-called tabs module, which I called AJAX tabs lip. It references here in the import section as you usually do with Angular modules. That module here consists of the NG module, which imports a tabs component and a tab component, which you can see here rendered on this kind of page.

    00:28 What we would actually like to do here is to extract this type of tabs module into a dedicated Angular library. Let's switch over to a new plain project. I have prepared here actually a simple folder, which has here a source folder, which is currently empty.

    00:43 I have prepared here a package.json file which has some details about name, the author, and also a very important section, which is the peer dependency section. This section actually defines what the dependencies are that the consuming application, which uses our library, has to satisfy.

    01:00 Let us copy over the source code of our tabs module from the NG app into our source folder here. Our source files are now in the source folder up there. The next step is to create here a so-called index.js file. This is like the entry point to our whole folder here, which will then later also be exported with our library. All we do here is to export from a file, which we still have to create, which is called public API. Let's create it here.

    01:32 It's the one that exports everything from our source folder we want to expose to the outside world. First of all, we export here the NGX top sleeve module. We also export the tabs component and the tab component. Once we have them, we can continue to do the packaging of our application such that it can be distributed. First of all, however, we have to install a utility which is called NG packager. We install it over NPM as a dev dependency.

    02:03 Once NG packager is installed, we can go back to our package.json and an option at the very top we can copy and paste in here the path to NG packager, which is so-called package schema JSON definition. This gives us some nice auto-completion support here within our package.json.

    02:19 We have to define here that NG package property in our package.json and then the lip property. We have to give NG package the entry file to our public API. In our case, it's at the root of our module here. Next, we can find here some convenient bill script and we invoke NG packager and we give it to package.json where it has to read that NG package property.

    02:41 Finally, let's open our terminal again and let's execute here NPM run build. You can see how NG packager starts and compiles our source code and bundles it ready for being distributed. When NG packager completes, you can see in this folder up there we have a set of files. These already match the Angular file format, they are distributed in a certain kind of manner which complies to specification developed by the Angular team.

    03:08 You can see how we have different kind of bundles, which are red then afterwards by different kind of tooling. Webpack for instance 3DSM5 while closure compiler will read the package definition in here. NG packager also added here these keys which the tools, such as Webpack or Node or closure compiler, will read in order to find the corresponding bundle they need.

    03:31 This folder could actually be directly deployed now to NPM by the NPM publish command. What we will do instead is go back to our application and we will now copy them over manually to our Node folder in order to test them out here in our application.

    03:47 We can now see in our Node folder we have that NGX top sleeve Gmail. If we open that up in a second we see that our bundles are already there in our Node folder under the name NGX top sleeve Gmail. What we can do now is to go to our app module. We can comment that out and we can import now directly from our Node folder and import the NGX top sleeve Gmail.

    04:11 To be sure to load the correct one, let's also delete this local one which we have now extracted into dedicated library. Let's again start Webpack. If we now refresh our browser, you can see how the tabs now correctly display and is loaded from an external package from an external Angular library we just created.