DEV Community

Manthan Ankolekar
Manthan Ankolekar

Posted on

Publish Angular Library to NPM

Install Angular cli to create Angular project



npm install -g @angular/cli


Enter fullscreen mode Exit fullscreen mode

Run the cli command to create new Angular Project



ng new test-library-angular


Enter fullscreen mode Exit fullscreen mode

Navigate to the project



cd test-library-angular


Enter fullscreen mode Exit fullscreen mode

Next generate library using cli command



ng generate library ng-library-log


Enter fullscreen mode Exit fullscreen mode

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 { }


Enter fullscreen mode Exit fullscreen mode

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"
    }
  }
}


Enter fullscreen mode Exit fullscreen mode

Build the library generated



ng build ng-library-log


Enter fullscreen mode Exit fullscreen mode

Navigate to the folder built



cd dist/ng-library-log


Enter fullscreen mode Exit fullscreen mode

To publish to NPM enter the command mentioned below



npm publish


Enter fullscreen mode Exit fullscreen mode

Structure of Project

project-structure

Link to Package: ng-library-log

Oldest comments (0)