Angular 6 is recently released with so many new awesome features, here is a full list in case you are interested. This article explores one of those features, which is a tool to create your own lib in Angular format
Angular CLI has now integration with ng-packagr, it's a great way of getting your library in Angular format. We are going to use Angular CLI throughout of our setup
- Firstly, we will create a lib of some components and services, which can be published
- Secondly, we will create a consumer project
New Angular CLI 6+ supports workspaces, which supports multiple projects. In order to update your CLI to the latest version, please execute the following commands in your terminal.
Before that make sure you ur node is at least on 8.9.0 +
npm uninstall -g angular-cli
npm cache verify
npm install -g @angular/cliCheck your version by ng --version
- Use the Angular CLI to create a workspace ng6-lib-work
- We will then generate our library project naming ng6-lib
- We will consume our ng6-lib by importing it as a library into our ng6-lib-work application.
Creation of Workspace
Our first goal is to create our workspace so lets execute below commands to get one and spin the server up to see output
ng new ng6-lib-work
If you see famous Angular starter project you are on right path.
New Angular 6 Configuration
The earlier version of Angular CLI was generation angular-cli.json but by version 6 it now generates angular.json with some modified contents.
The main thing to see is the projects object. It has one entry for each project.
In projects section you should see something like below
The first project is the name of workspace we created and second one the e2e project generated by itself. Once we create our lib project we will see another entry soon in project object with ng6-lib.
Creation of Library module
Lets create our library project now by using below command
ng generate library ng6-lib --prefix=nlib
Here we uses nlib as prefix to make it unique else Angular CLI will use lib by default.
Don’t get scared by amount files it created , we will go through with some of the features being added by our super cool CLI on execution of generate library command.
- Adds a ng6-lib project for our library in angular.json
- ng-packagr dependeny added to our package.json
- Adds a reference to the ng6-lib build path in tsconfig.json
- Creates sources for our library in projects/ng6-lib
Building our Library
Before we can use our new library don’t forget to build it
ng build --prod ng6-lib
This builds our library to the folder:
Using the prod flag will build it using AOT that helps us in finding errors way ahead.
Lets use it
The main goal behind any library is to have a project for which this library was created for this we have our ng-lib-work project . Here we are going to consume but ti keep it simple for now we will just import the module created by Angular CLI in our sample app and display default component.
We we will add that module to imports of app.module.ts of ng-lib-work project. Now the question is from where you will import. If you remember the changes made in tsconfig.json when we generated library.
This setting allows you to import Ng6LibModule from ng6-lib instead directly from file which is aligned when it later published to npm.
So your app.module.ts should look like this
After importing this module lets add the tag of component from our newly created lib like below
If everything gone fine you should see your component rendered on browser.
Making your lib ready for NPM
Well we all know when we write lib its not only for local usage may be you want to write something for bigger group or open source community so with build you have to package that also.
for this you have to modify your package.json to add below handy scripts
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build-lib": "ng build --prod ng6-lib",
"npm-pack": "cd dist/ng6-lib && npm pack",
"package": "npm run build-lib && npm run npm-pack"
- build-lib: builds the library using the production flag.
- npm-pack: creates an npm package as a
- package: combines building and packaging in a single command.
So what you are waiting for execute below command to get your package ready for npm
npm run package
Note: It may be possible that like me you don’t see newly created gzip file in vscode please go to finder to see newly generated file.
Thank you for your time and patience ,I assume if you reached this section you must be having at least a basic idea of how powerful and integrated is new Angular CLI 6 is for creating libraries which are npm ready.
I wrote this while taking inspiration from here but I found this article little tough for beginners.
If you interested in seeing code of above article clone here.