angular6组件封装以及发布到npm

一、创建angular项目

ng  new  myFirstDemo //angular-cli新建项目
ng g m testm //新建模块
ng g c testm/headertest //新建组件

提示：组件必须到处去

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [HeadertestComponent],
  exports: [HeadertestComponent]   //新添加的部分
})

二、安装ng-packagr

npm i ng-packagr --save
npm i ng-packagr --save-dev

三、根目录下新建2个文件（和项目名同级的目录）

1. ng-package.json，内容如下：

{
    "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
    "lib": {
        "entryFile": "public_api.ts"
    },
    "whitelistedNonPeerDependencies": [
        "."
    ]
}

2.public_api.ts，内容如下

export * from './src/app/testm/testm.module';

提示：此文件是导出封装的模块。

四、修改package.json文件

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "packagr": "ng-packagr -p ng-package.json"     //新添加的
  },
  "private": false,                       //修改为false

五、删除package.json文件dependences内容，

//下方代码全删除
  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "core-js": "^2.5.4",
    "firstdemodiective": "0.0.0",
    "nv-test-header": "^1.0.5",
    "rxjs": "~6.2.0",
    "zone.js": "~0.8.26"
  }

六、执行打包命令

npm run packagr

提示：项目目录会多一个dist文件夹

七、切换目录到dist文件夹（执行 cd dist）

npm pack

提示：如果npm没有登录，请先去npm官网注册账号，并在根目录执行 npm login，依次输入账号和密码以及邮箱

八、接着七的步骤继续执行npm publish

九、此时组件已经发布到npm官网，你可以登录自己的账号去查看相关信息。

 

最后补充：我在执行上面操作时，遇到的错误以及排查信息。

1.npm run packagr 执行这句命令时，会报node_modules里面的一堆错误，原因是rxjs的版本号不对。

2.npm pack 执行这句命令时，会报@angular/animations不在白名单什么的错误。这个问题已经解决了，我已在ng-package.json文件加了“whitelistedNonPeerDependencies”的配置。

3.修改组件版本号或者名称等配置信息，只需要在package.json文件修改即可。