Publish Angular Library to NPM

Install Angular cli to create Angular project

npm install -g @angular/cli

Run the cli command to create new Angular Project

ng new test-library-angular

Navigate to the project

cd test-library-angular

Next generate library using cli command

ng generate library ng-library-log

Import NgLibraryLogModule into app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgLibraryLogModule } from 'projects/ng-library-log/src/public-api';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

Update package.json from dist/ng-library-log as shown below

{
  "name": "ng-library-log",
  "version": "0.0.1",
  "author": {
    "name": "Manthan Ank"
  },
  "keywords": [
    "angular",
    "javascript"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/manthanank/test-libary-angular.git"
  },
  "description": "Test Library in angular",
  "peerDependencies": {
    "@angular/common": "^15.1.0",
    "@angular/core": "^15.1.0"
  },
  "dependencies": {
    "tslib": "^2.3.0"
  },
  "sideEffects": false,
  "module": "fesm2015/ng-library-log.mjs",
  "es2020": "fesm2020/ng-library-log.mjs",
  "esm2020": "esm2020/ng-library-log.mjs",
  "fesm2020": "fesm2020/ng-library-log.mjs",
  "fesm2015": "fesm2015/ng-library-log.mjs",
  "typings": "index.d.ts",
  "exports": {
    "./package.json": {
      "default": "./package.json"
    },
    ".": {
      "types": "./index.d.ts",
      "esm2020": "./esm2020/ng-library-log.mjs",
      "es2020": "./fesm2020/ng-library-log.mjs",
      "es2015": "./fesm2015/ng-library-log.mjs",
      "node": "./fesm2015/ng-library-log.mjs",
      "default": "./fesm2020/ng-library-log.mjs"
    }
  }
}

Build the library generated

ng build ng-library-log

Navigate to the folder built

cd dist/ng-library-log

To publish to NPM enter the command mentioned below

npm publish

Structure of Project

Link to Package: ng-library-log

Blog

Publish Angular Library to NPM

Manthan Ankolekar

Join Our Newsletter. No Spam, Only the good stuff.

Related