Angular 6 was realeased with
many improvements and one among them is the integration of Angular
CLI with ng-packagr for generating and building Angular Libraries.
ng-packagr is a tool that transpiles the libraries into Angular
Package Format.
This blog is about the details of creating a component library and implementing it in another Angular application.
Creating an Angular Workspace
First we have to create a
project using ng new.So now the Angular CLI creates a workspace.
ng
new PackageLibrary
cd
PackageLibrary
ng serve
ng serve
Generating a component library
Now we will generate the
component Library using the command ng generate library. A project
folder is generated in the workspace with Library component.
ng
generate library Footer
In angular.json there
is project object of the main application. Now after generating the
library a new project object is created.
"projects": {
"LibraryPackage": {...}
"LibraryPackage-e2e": { ...}
"footer":{...}},
In
package.json
"@angular-devkit/build-ng-packagr":
"~0.8.0",
is
included in dev dependencies.
In
tsconfig.json
lib path is added to it.
"paths":
{
"footer":
[
"dist/footer"]
In
the project folder we can find our library. In
our library the Angular CLI created a new module with a service and a
component. Along
with the library we can also find package.json and ng package.json
package.json:
This
is the one that gets published with our library as an npm
package.
It
specifies the dependencies.
{
"name":
"footer",
"version":
"0.0.1",
"peerDependencies":
{
"@angular/common":
"^6.0.0-rc.0 || ^6.0.0",
"@angular/core":
"^6.0.0-rc.0 || ^6.0.0"
}
}
ng
package.json:
This
is the configuration file for ng-packagr.
It
tells ng-packagr where to find our entry file and where to build our
library.
{
"$schema":
"../../node_modules/ng-packagr/ng-package.schema.json",
"dest":
"../../dist/footer",
"lib":
{
"entryFile":
"src/public_api.ts"
}
}
In
src folder we can find public-api.ts
This is the entry file.
export
* from './lib/footer.service';
export
* from './lib/footer.component';
export
* from './lib/footer.module';
Now
we can write the code in component library. A footer
is created in footercomponent.ts
After
that in appmodule.ts
we will import the FooterModule.
import
{ FooterModule } from '../../projects/footer/src/lib/footer.module';
imports:
[
BrowserModule,
FooterModule
],
Now
in app.html
we
will add the footer
<lib-footer>This
is the footer</lib-footer>
Now
run the project with the command ng serve.
Building the Library
The
library component is working so now we have to bulid it. We will add a
script to build our library in package.json
"build:lib":"ng-packagr
-p ./projects/footer/ng-package.json"
And
we will bulid it through the command npm
run build:lib
Packaging the Library
Go
to the dist folder
cd dist
Go
to the footer component
cd footer
For
packaging our library we have to give a commands
npm pack .
Then
in dist folder in lib a file is added.
Footer-0.0.1tgz. Copy
and save this file in any folder.
Using the Library in a Angular Application
We
can use this file in any other Angular 6 application. Open any
Angular application where you want to implement your component
library.
Installing
the library
Now
give the command npm
i –-save
and give the path of the library file.After
installing you can find the library file in node modules.
npm
i –saveD:\LibraryPackage\dist\footer-0.0.1.tgz
Importing the library module
We
should import in our appmodule.ts Now we can use footer
component library in this application.
