独立插件开发

1. 环境要求

工具	版本要求
Node.js	>=18.x
Yarn	1.22.x
Angular CLI	>=14.2.6

验证环境

node -v    # 应输出 v18.x.x
yarn -v    # 应输出 1.22.x

全局安装 Angular CLI

npm install -g @angular/cli@14.2.11
ng version

2. 项目概览

本仓库包含一个独立插件示例项目：

包名	说明
plugin-my-component	独立插件项目示例，基于 Angular 14 + Module Federation，只需安装依赖后运行开发

3. 安装依赖

3.1 安装 plugin-my-component（插件项目）

cd plugin-my-component
yarn

4. 运行方式

4.1 启动插件开发服务器

cd plugin-my-component
yarn dev

• 该命令会启动 Angular 开发服务器，默认端口 4200
• 浏览器会自动打开 http://localhost:4200
• 支持热更新（HMR），修改代码后浏览器自动刷新

4.2 开发模式说明

开发模式下，AppComponent 作为本地开发模拟组件，通过传入 mock 数据来测试插件业务组件：

• app.component.ts - 根组件，提供模拟的 pen 和 canvas 数据
• plugin-my-component.component.ts - 实际插件业务组件，继承自 BaseComponent

这样可以在不依赖主平台的情况下独立开发和调试插件。

5. 目录结构

── plugin-my-component/                   # 独立插件项目（示例）
    ├── package.json                       # 项目依赖配置
    ├── angular.json                       # Angular 构建配置
    ├── tsconfig.json                      # TypeScript 基础配置
    ├── tsconfig.app.json                  # 应用 TypeScript 配置
    ├── webpack.config.dev.js              # Webpack 开发构建配置
    ├── webpack.config.prod.js             # Webpack 生产构建配置
    ├── moduleFederationPlugin.js          # Module Federation 插件配置
    └── src/
        ├── main.ts                        # 应用入口
        ├── bootstrap.ts                   # Module Federation 引导入口
        ├── public-api.ts                  # 公共 API 导出
        ├── index.html                     # HTML 模板
        ├── polyfills.ts                   # Polyfills
        ├── styles.scss                    # 全局样式
        ├── favicon.ico                    # 网站图标
        ├── environments/
        │   ├── environment.ts             # 开发环境配置
        │   ├── environment.prod.ts        # 生产环境配置
        │   └── .gitkeep                   # Git 占位文件
        ├── assets/
        │   ├── option.json                # 插件选项配置
        │   └── image/                     # 静态图片资源
        │       └── .gitkeep               # Git 占位文件
        └── app/
            ├── app.module.ts              # 根模块
            ├── app.component.ts           # 根组件（本地开发模拟组件）
            ├── types.ts                   # 类型定义
            └── component/
                ├── plugin-my-component.component.ts    # 插件业务组件
                ├── plugin-my-component.component.html  # 插件模板
                ├── plugin-my-component.component.scss  # 插件样式
                └── .gitkeep               # Git 占位文件

5.1 核心文件说明

文件	说明
app.component.ts	本地开发模拟组件，提供 mock 数据用于独立测试插件
plugin-my-component.component.ts	实际插件业务组件，继承BaseComponent，实现插件核心逻辑
plugin-my-component.component.html	插件业务组件模板，使用 ng-zorro-antd 组件构建 UI 界面
option.json	插件配置文件，定义插件的扩展属性（extendKeys）、控制面板配置（controlPanel）、默认尺寸、样式等

6. 打包构建

6.1 插件项目打包

cd plugin-my-component
yarn build

• 构建产物输出到：dist/plugins/plugin-my-component/1.0.0/
• 将生成的plugin-my-component包放到IoTCenter\IoTCenterWeb\publish\wwwroot\plugins目录下

7. 常见问题

Q: 端口 4200 被占用

A: 修改 package.json 中的 dev 脚本，添加 --port 参数指定其他端口：

"dev": "ng serve --port 4300 --open"

或者修改 angular.json 中 serve.options.port 配置。

注意：端口配置在两个地方：

1. package.json 的 scripts.dev 字段
2. angular.json 的 projects.plugin-my-component.architect.serve.options.port 字段

建议保持两处配置一致。