一、创建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 --savenpm 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文件修改即可。