如何发布angular模块到npm

最新推荐文章于 2022-02-25 13:38:15 发布

原创最新推荐文章于 2022-02-25 13:38:15 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#npm #angular模块

angular 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍首次创建并发布Angular NPM包的全过程，包括项目搭建、功能实现、配置、编译及发布步骤。通过实例讲解如何使用ng new和ng generate创建项目与库，配置项目信息，编译代码，并在npmjs上注册账号进行发布。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

发布后的项目

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

在这里插入图片描述

发布过程

新的项目

ng new angular-clone-deep

ng new

新建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>