HOW TO CREATE AN ANGULAR LIBRARY

1 Create a workspace

					ng new my-workspace --create-application=false
					cd my-workspace
				

- You will need to previously install Angular_CLI.

2 Generate Library

					ng generate library my-lib
				

- You can do this in the new workspace or in a previously created angular application.

- This will create a folder called projects/my-lib where my-lib is the name of your library given to the ng command.

- Inside my-lib there is a src folder with a public-api.ts file that exports the modules, services and components that compose the library.

- An Angular library and an Angular application build a project differently. If you build a library off an existing project, the library will get its own project structure.

3 Build Library

					ng build my-lib --prod

					ng build my-lib --watch
				

- Run from workspace folder.

- In Angular 7 and before running build using the prod flag will use Angular original compiler not the new Ivy Compiler.

- Library bundle will be saved in dist folder. You will have three package.json files: 1) workspace package.json, 2) source library package.json, 3) dist library package.json

4 Install Library (local development)

					ng install ../path-to-library/dist/my-lib
				

- Run from your application folder.

- If you built the library with watch changes to the library wil be automatically picked up by the angular development server running the application.

5 Import Library

					import { BrowserModule } from '@angular/platform-browser';
					import { NgModule } from '@angular/core';
					import { AppComponent } from './app.component';
					import { MyLibModule } from 'my-lib';

					@NgModule({
						declarations: [
							AppComponent
						],
						imports: [
							BrowserModule,
							MyLibModule
						],
						providers: [],
						bootstrap: [AppComponent]
					})
					export class AppModule { }
				

- Library is imported as a standard node module.

6 Start Project

					npm start
				

Fix Project Compiler (local development)

					{
						"compileOnSave": false,
						"compilerOptions": {
							"baseUrl": "./",
							"outDir": "./dist/out-tsc",
							"sourceMap": true,
							"declaration": false,
							"module": "esnext",
							"moduleResolution": "node",
							"emitDecoratorMetadata": true,
							"experimentalDecorators": true,
							"importHelpers": true,
							"target": "es5",
							"typeRoots": [
								"node_modules/@types"
							],
							"lib": [
								"es2018",
								"dom"
							],
							"paths": {
								"@angular/*":[
									"./node_modules/@angular/*"
								]
							}
						}
					}
				

- Add this configuration to your project tsconfig.json (project that installed the library).

- The last fragment, to define the paths tells the typescript to search the angular modules imported from the library in the local project.

- If you do not add this you will get this warning in compilation:

Pack Library

					npm pack ../path-to-library/dist/my-lib
				

- This creates a tar file.

- You can optionally install the tar file in step 4. However, changes to the library need to be manually built and packaged.

REFERENCE

1. Creating Libraries in Angular
2. How to test your NPM module without publishing it
3. How to remove npm links
4. How to pack local libraries for testing