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