Angular: Creating Angular Client Library
Kurapati Mahesh
Posted on November 18, 2022
Download and install Node.js
⬇
Open Terminal
or Command Prompt
and check node version using command node -v
⬇
Now, type in npm install -g @angular/cli
to install CLI
⬇
Check CLI version using ng --version
⬇
Create Angular workspace using ng new <app_name>
⬇
app_name consider as libraryApp
⬇
To create library init, use ng g library <library_name>
⬇
library_name
consider as myLib
⬇
Inside the projects
folder, go to mylib component inside myLib
library.
⬇
Design reusable component in it.
⬇
Now, build that library using ng build <library_name>
⬇
Library gets generated in dist
folder
Using this library in same application.
Import myLib
module in app.module.ts
of application
⬇
Access components or services of myLib
library inside application and use wherever required in application
⬇
Now, do ng serve
to check the application
Using in external application
ng new externalApp
- Create new external application
⬇
In the ng build myLib
log, dist
folder locations are shown
⬇
take lib
path and do npm i <path>
inside new external application
⬇
Import myLib
module in app.module.ts
of application
⬇
Access components or services of myLib
library inside application and use wherever required in application
⬇
Now, do ng serve
to check the application
Posted on November 18, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
February 1, 2024