【Angular18】封装自定义组件

1. 准备组件

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

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

javascript 复制代码

registry=发布地址
                        
always-auth=true

创建文件 ng-package.json

js 复制代码

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

创建文件 package.json

js 复制代码

{
  "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

js 复制代码

export * from './app-legalentities/app-legalentities.component';
export * from './app-legalentities/app-legalentities.service';

3. 修改配置文件

修改 public_api.ts，以下内容为导出的模块、service、modal等

javascript 复制代码

export * from './app-legalentities/app-legalentities.component';
export * from './app-legalentities/app-legalentities.service';

修改 package.json

javascript 复制代码

  "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 //安装打包命令

javascript 复制代码

npm i ng-packagr

配置 package.json 文件,删除 dependencies 和 devDependencies中的内容

javascript 复制代码

{
  "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文件

javascript 复制代码

npm run packagr

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

javascript 复制代码

npm pack

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

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

javascript 复制代码

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

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

javascript 复制代码

vsts-npm-auth -config .npmrc

7. 发布打包文件

执行指令 npm publish

javascript 复制代码

npm publish

8. 引入自定义组件

在使用组件的根目录下，即跟package.json同级创建文件.npmrc，内容同2.3
安装组件 npm i app-country-select@0.0.1

javascript 复制代码

npm i app-country-select@0.0.1

遇到的问题

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