bm-ng-renderer

这是一个基于 Angular 的动态渲染器库项目，用于根据 JSON Schema 动态渲染页面组件。

快速开始

1. 创建物料对应的动态 Angular 组件

ng g c ./components/componentName

2. 在component-map.ts中添加物料到动态组件的映射
3. 修改动态组件

关于依赖安装

• node 版本切换为 14
• "@bm-custom/ui": "0.1.42"无法在本地安装
• 安装依赖的时候先把"@bm-custom/ui": "0.1.42"从 package.json 中删除在执行npm i
• 解压@bm-custom.zip到node_modules目录下，达到下图的效果

技术方案

渲染器技术方案

库的构建和发布

构建库

npm run build:lib

构建完成后，库文件将输出到 dist/ag-renderer 目录。

发布到私有 npm 仓库

npm run publish:lib

发布前请确保：

• 已更新版本号（在 projects/ag-renderer/package.json 中）
• 已配置私有 npm 仓库的访问权限
• 已正确配置 .npmrc 文件

本地打包测试

npm run pack:lib

此命令会构建库并打包为 .tgz 文件，可用于本地测试安装。

其他项目使用

安装

npm install @bm-ng-renderer/ag-renderer

配置 .npmrc

在使用该库的项目中，需要配置 .npmrc 文件：

@bm-ng-renderer:registry=https://repo.digiwincloud.com.cn/maven/repository/npm-bm/

使用

import { AgRendererModule } from '@bm-ng-renderer/ag-renderer';

@NgModule({
  imports: [AgRendererModule],
  // ...
})
export class AppModule {}

导入其他模块

// 导入工具类
import { DataService } from '@bm-ng-renderer/ag-renderer';

// 导入工具函数
import { getValueByPath, setValueByPath } from '@bm-ng-renderer/ag-renderer';

// 导入上下文相关
import { buildSchemaContext } from '@bm-ng-renderer/ag-renderer';

// 导入配置
import { dataUrl, ddmUrl } from '@bm-ng-renderer/ag-renderer';

迁移指南

如果之前是通过复制 projects 文件夹的方式使用，迁移到 npm 包需要：

1. 删除复制的文件夹

   # 删除项目中复制的 projects/ag-renderer 文件夹
   rm -rf projects/ag-renderer

2. 安装 npm 包

   npm install @bm-ng-renderer/ag-renderer

3. 修改导入路径

   • 旧：import { AgRendererModule } from 'projects/ag-renderer/src/lib/ag-renderer.module'
   • 新：import { AgRendererModule } from '@bm-ng-renderer/ag-renderer'

4. 删除 TypeScript 路径映射 在 tsconfig.json 中删除或注释掉相关配置：

   {
     "compilerOptions": {
       "paths": {
         // "ag-renderer": ["projects/ag-renderer/src"]  // 删除此行
       }
     }
   }

5. 更新样式引用（如果有）

   • 旧：@import 'projects/ag-renderer/src/lib/styles.less';
   • 新：@import '@bm-ng-renderer/ag-renderer/styles.less';

正式区发布

正式区发布和测试区发布使用的是相同的分支 test @陆英

730 代办

• [ ] 模版预览 @蔡新
• [ ] 属性、事件验证 @焦阳