Creating an Angular Library - deependhamecha/angular GitHub Wiki
Creating Library
ng new angular-app
Generate a library
ng generate library my-logger
If you check angular.json
, you will find projects
key and inside it there will be current application name.
angular.json
"projects": {
"angular-app": {
"projectType": "application",
...
"my-logger": {
"projectType": "library",
...
It will create projects
folder and inside it will be your library.
Important files are public-api.ts
where you will have exported files.
Remember: Dont re-export your components or ngmodules if they are not present in public-api.ts
. Try removing .component.ts
from public-api.ts and keep it in module.ts.
Use alias name of the library in main app
If you want to use
import { MyLoggerService } from 'my-logger';
Check tsconfig.json, you will find paths which points to the library files inside dist folder. So, for this, you need to make a build.
From root,
ng build my-logger
Now, do ng serve
and you can use this.
Exporting Component from NgModule
Suppose you keep it in exports
in NgModule
and do it put it in public-api.ts. You will get this error:
projects/my-logger/src/lib/my-logger.component.ts:13:14 - error NG3001: Unsupported private class MyLoggerComponent. This class is visible to consumers via MyLoggerModule -> MyLoggerComponent, but is not exported from the top-level library entrypoint.
Watch during library development
ng build my-lib --watch