angular18进行组件化开发

需求

 项目要进行组件化管理，组件包要放在自己的服务器上不能放在npm上。

前提

将自己开发好的组件单独拿出来放在定义好的空白文件夹里面，所有操作都在这个文件夹下面操作。

1、打包准备

以自己的组件作为根目录，新建ng-package.json文件，和组件属于同级。文件内写入

{
    "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
    "lib": {
      "entryFile": "public_api.ts" `// 名字自己起，需对应上后面的文件名`
    }
}

 在根目录下新建package.json文件，也可以复制一份别的项目的package.json文件，引入组件所需要的依赖。然后执行命令npm i 进行依赖安装。

然后执行npm i ng-packagr安装打包命令。

{
  "name": "组件名称",
  "version": "版本号",
  "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",
    "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"
  }
}

所有依赖都装好后将package.json文件中的 private 改成 false，dependencies删除掉，package.json文件最后的结果是这样。

{
  "name": "组件名称",
  "version": "版本号",
  "scripts": {
    "ng": "ng",
    "test": "ng test",
    "packagr": "ng-packagr -p ng-package.json"
  },
  "private": false
}

 在根目录下新建public_api.ts文件，这个文件名称可以随意起，但是要和第一个步骤的名称对应上。文件内容是写入需要导出的文件。test文件是自己的组件。

export * from './test/test.module';
export * from './test/test.component';

接着在根目录下新建一个.npmrc文件，文件内写入组件包要发布的地址。

registry=地址
                        
always-auth=true

最后文件组成结构是这样

2、开始打包 

在根目录下执行npm run packagr命令，会在根目录下生成dist文件。终端进入dist文件内执行 npm pack命令生成一个压缩文件，没生成压缩包别人用不你的包。然后将.npmrc文件复制一份到dist文件内。

接着执行 `npm install -g vsts-npm-auth --registry https://registry.npmjs.com --always-auth false`命令，安装 vsts-npm-auth。

然后执行 `vsts-npm-auth -config .npmrc`命令，配置vsts-npm-auth

3、发布打包文件 

 执行 npm publish命令就发布完成了。

4、使用自己的组件包 

 在项目中使用组件包首先需要在项目的package.json文件的同级中添加.npmrc文件，和组件包的.npmrc文件一样。

然后在项目中直接npm i 组件名称@版本号。

{
  "name": "项目名称",
  "version": "版本号",
  "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",
    "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"
  }
}

依赖安装好后就可以使用了。

<app-test [name]="'name'" [code]="'code'"></app-test>

5、问题 

在使用过程中组件定义的一些参数有时候会提示找不到或者没有这个参数 （实际上已经写了），需要在使用的ts文件内引入CUSTOM_ELEMENTS_SCHEMA。

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

imports: [ ],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],

每次修改组件需要重新发布，发布的版本号一定要修改，不能重复。