【Angular18】封装自定义组件

1. 准备组件

2. 创建打包文件夹及部分配置文件

1. 创建 文件夹app-legalentities-root
2. 拷贝组件源文件到新的文件夹app-legalentities中
3. 创建文件 .npmrc

registry=发布地址always-auth=true

4. 创建文件 ng-package.json

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

5. 创建文件 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依赖包和安装打包指令

1. 使用npm i 安装包
   
2. 执行 npm i ng-packagr //安装打包命令

npm i ng-packagr

3. 配置 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文件

1. 执行 npm run packagr 生成dist文件

npm run packagr

2. 进入dist 文件目录-执行 `npm pack 生成一个压缩文件

npm pack

6. 安装vsts-npm-auth和配置

1. 在app-legalentities-root文件夹下 安装 vsts-npm-auth

npm install -g vsts-npm-auth --registry https://registry.npmjs.com --always-auth false

2. 在dist根目录下创建文件.npmrc，内容同2.3
3. 在dist文件夹中配置vsts-npm-auth

vsts-npm-auth -config .npmrc

7. 发布打包文件

在dist文件夹中执行指令 npm publish发布组件

npm publish

8. 引入自定义组件

1. 在使用组件的根目录下，即跟package.json同级创建文件.npmrc，内容同2.3
   

2. 安装组件 npm i app-country-select@0.0.1

npm i app-country-select@0.0.1

9. 后续升级

1. 在demo框架中测试升级功能，测试通过后执行下一步。
2. 版本号 + 1，删除原先的dist文件夹及其内容，完成后执行下一步。
3. 打包生成dist，复制文件 .npmrc，然后pack压缩文件，完成后执行下一步

// 在root文件夹中执行
npm run packagr// 在dist中执行
npm pack

4. 在dist文件夹中配置vsts-npm-auth，然后发布组件

// 配置发布环境
vsts-npm-auth -config .npmrc// 发布组件
npm publish

遇到的问题

1. ‘npm run packagr’ 打包报错了
   解决方案：将 angular框架的 app-legalentities-root文件夹移到单独的位置，首先删除已经安装好的依赖包，然后执行第四步