【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. 发布打包文件

执行指令 npm publish

npm publish

8. 引入自定义组件

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

2. qw

遇到的问题

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