Have you ever created an Angular Library as a front-end developer?

Library

01. Creating an angular Library

ng new [app-name] --create-application=false
1.1 — terminal command executing
1.2 — VS-code file structure
ng g library [name-of-the-library]
1.2 — Generating the library
1.4 — File structure after creating the library

02. Creating an Angular app to use the library

ng g application [name-of-the-applciation]
2.1 — Generating ng application
ng serve [name-of-the-applciation]
2.2 — Serving the ng application

03. Publishing the Angular library

ng build [name-of-the-library]
3.1 — Building the library
3.1 — After including the library module to the application’s module
ng serve [name-of-the-application]
3.3-Working example for the library inside the angular application
"scripts":
{
"ng": "ng",
"start": "ng serve",
"build": "ng build",
....
...
"test-lib:build":"ng build test-library"
},
/*
* Public API Surface of test-library
*/
export * from './lib/test-library.service';
export * from './lib/test-library.component';
export * from './lib/test-library.module';

04. Pack the library on another app

npm pack
"scripts":
{
"ng": "ng",
"start": "ng serve",
"build": "ng build",
....
...
"test-lib:build":"ng build test-library"
"test-lib:pack": "cd dist/test-library && npm pack"
}
4.1-Successfull packing of the library with npm pack command
4.2 — packed file
npm install [path-to-the-file].tgz

--

--

Developer ❤️ JS

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store