如何发布angular模块到npm

发布后的项目

这是我第一次创建npm包，实现了clone-deep功能(clone-deep不需要创建angular module， 项目仅做测试学习)。

发布过程

新的项目

ng new angular-clone-deep

新建library

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

实现功能

cd projects/ng-clone-deep

编写自己要实现的功能模块，可以参考： https://github.com/liwei511/ng-clone-deep

配置

repository： 资源信息
homepage： 主页
author： 作者信息
version： 版本号

编译

ng build ng-clone-deep

会编译到项目根目录 dist/ng-clone-deep （lib名)

发布到NPM

注册

到 npmjs上注册一个账号， 注意需要邮箱验证。

然后在终端输入

npm adduser

输入用户名，密码，邮箱即可登入成功

这里注意，如果npm使用的是淘宝镜像，请切回npm。

登陆成功后，输入

npm whoami

如果出现了你的用户名，说明你已经成功登陆了

发布

在你的编译后目录下（我的是dist/ng-clone-deep）

npm publish

使用

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>