【Angular18】封装自定义组件
1. 准备组件
2. 创建打包文件夹及部分配置文件
- 创建 文件夹app-legalentities-root
- 拷贝组件源文件到新的文件夹app-legalentities中
- 创建文件 .npmrc
registry=发布地址always-auth=true
- 创建文件 ng-package.json
{"$schema": "./node_modules/ng-packagr/ng-package.schema.json","lib": {"entryFile": "public_api.ts"}}
- 创建文件 package.json
{"name": "xxx-xx-test","version": "0.0.9","scripts": {"ng": "ng","test": "ng test","packagr": "ng-packagr -p ng-package.json"},"private": true,"dependencies": {"@angular/animations": "^18.0.0","@angular/common": "^18.0.0","@angular/compiler": "^18.0.0","@angular/core": "^18.0.0","@angular/router": "^18.0.0","ng-zorro-antd": "^18.0.1","raise-ssh-test": "file:","rxjs": "~7.8.0","tslib": "^2.3.0","zone.js": "~0.14.3"},"devDependencies": {"@angular/animations": "^18.0.0","@angular/common": "^18.0.0","@angular/compiler": "^18.0.0","@angular/core": "^18.0.0","@angular/router": "^18.0.0","rxjs": "~7.8.0","tslib": "^2.3.0","zone.js": "~0.14.3"}
}- 创建文件 public_api.ts
export * from './app-legalentities/app-legalentities.component';
export * from './app-legalentities/app-legalentities.service';
3. 修改配置文件
- 修改 public_api.ts，以下内容为导出的模块、service、modal等
export * from './app-legalentities/app-legalentities.component';
export * from './app-legalentities/app-legalentities.service';
- 修改 package.json
"name": "app-legalentities-root", // 当前组件打包文件夹名称"version": "0.0.1", // 当前组件版本，每次发布后，下次发布前版本号+1"scripts": {...},"dependencies": {"@angular/animations": "^18.0.0", // 公共"@angular/common": "^18.0.0", //公共"@angular/compiler": "^18.0.0", //公共"@angular/core": "^18.0.0", //公共"@angular/router": "^18.0.0", //公共"ng-zorro-antd": "^18.0.1", // 当前组件依赖包"rxjs": "~7.8.0", //公共"tslib": "^2.3.0", //公共"zone.js": "~0.14.3" //公共},
4. down依赖包和安装打包指令
- 使用npm i 安装包
- 执行
npm i ng-packagr //安装打包命令
npm i ng-packagr
- 配置
package.json文件,删除 dependencies 和 devDependencies中的内容
{"name": "app-legalentities-root", `// 修改打包的名字`"version": "0.0.2", `// 版本号 +1`"scripts": {"ng": "ng","test": "ng test","packagr": "ng-packagr -p ng-package.json" `//配置打包命令`},"private": false // 这个要修改为false，下面的图忘记改了
}
5. 打包开始-生成dist文件
- 执行
npm run packagr 生成dist文件
npm run packagr
- 进入
dist文件目录-执行 `npm pack 生成一个压缩文件
npm pack
6. 安装vsts-npm-auth和配置
- 在app-legalentities-root文件夹下 安装 vsts-npm-auth
npm install -g vsts-npm-auth --registry https://registry.npmjs.com --always-auth false
- 在dist根目录下创建文件.npmrc，内容同2.3
- 在dist文件夹中配置vsts-npm-auth
vsts-npm-auth -config .npmrc
7. 发布打包文件
在dist文件夹中执行指令 npm publish发布组件
npm publish
8. 引入自定义组件
-
在使用组件的根目录下，即跟package.json同级创建文件.npmrc，内容同2.3
-
安装组件 npm i app-country-select@0.0.1
npm i app-country-select@0.0.1
9. 后续升级
- 在demo框架中测试升级功能，测试通过后执行下一步。
- 版本号 + 1，删除原先的dist文件夹及其内容，完成后执行下一步。
- 打包生成dist，复制文件 .npmrc，然后pack压缩文件，完成后执行下一步
// 在root文件夹中执行
npm run packagr// 在dist中执行
npm pack
- 在dist文件夹中配置vsts-npm-auth，然后发布组件
// 配置发布环境
vsts-npm-auth -config .npmrc// 发布组件
npm publish
遇到的问题
- ‘npm run packagr’ 打包报错了
解决方案：将 angular框架的 app-legalentities-root文件夹移到单独的位置，首先删除已经安装好的依赖包，然后执行第四步
