700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > angular6组件封装以及发布到npm

angular6组件封装以及发布到npm

时间:2019-12-13 10:24:37

相关推荐

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 --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文件修改即可。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。