How to publish angular modules to npm

Project after release

This is the first time I have created an npm package and realized the clone-deep function (clone-deep does not need to create an angular module, the project is only for testing and learning).

Release process

New project

ng new angular-clone-deep

New library

cd angular-clone-deep
ng g library ng-clone-deep --prefix yourprefix

Realize function

cd projects/ng-clone-deep

To write the functional modules you want to implement, you can refer to: https://github.com/liwei511/ng-clone-deep

Configuration

repository: resource information
homepage: homepage
author: author information
version: version number

Compile

ng build ng-clone-deep

Will be compiled to the project root directory dist/ng-clone-deep (lib name)

Publish to NPM

registered

Register an account on npmjs , note that email verification is required.

Then type in the terminal

npm adduser

Enter the user name, password, and email to log in successfully

Note here that if npm is using Taobao mirror, please switch back to npm.

After logging in successfully, enter

npm whoami

If your username appears, it means you have successfully logged in

release

In your compiled directory (mine is dist/ng-clone-deep)

npm publish

use

Install

npm install ng-clone-deep --save

Use

Import the service into every component

import { Component, OnInit } from '@angular/core';
import { NgCloneDeepService } from 'ng-clone-deep';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  source = [{name: 'Tom'}, {name: 'Jerry'}];
  constructor(private cloneDeep: NgCloneDeepService) {}

  ngOnInit() {
    const sourceClone = this.cloneDeep.clone(this.source); // cloneDeep.clone()
  }
}

example

Import the module into every module where you want to use the components.

import { NgCloneDeepModule } from 'ng-clone-deep/public-api';

@NgModule({
  imports: [ NgCloneDeepModule ]
})
export class AppModule {
}

<litwak-ng-clone-deep></litwak-ng-clone-deep>