使用Angular开发Zoho CRM扩展遇运行问题，求可行实现方案

前置准备 #

确认你使用的ZET CLI版本≥1.2.0，Angular版本≥14，低版本存在路由兼容问题。

第一步：调整Angular项目构建配置 #

打开Angular项目的angular.json文件，修改对应配置项：

• 修改outputPath为你Zoho项目的app目录，省掉手动复制的步骤
• 新增baseHref配置为./，避免资源引用路径错误
• 关闭deployUrl配置，不要设置固定域名路径
  示例配置片段：

{
  "projects": {
    "Cat Angular Project": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "../Cat Zoho Project/app",
            "baseHref": "./",
            "index": "src/index.html",
            "main": "src/main.ts"
          }
        }
      }
    }
  }
}

第二步：修改Angular入口index.html挂载逻辑 #

Zoho扩展运行时会注入自带的容器元素，不要直接挂载到body：

• 在Angular的src/index.html的body内新增自定义根节点<app-root></app-root>，不要修改body本身的属性
• 确认Angular的main.ts中是挂载到app-root节点，不是document.body

第三步：处理Zoho SDK注入兼容 #

Angular的打包规则会过滤全局变量，需要把Zoho的全局API变量声明为全局可用：

1. 在Angular项目的src目录下新增typings.d.ts文件，添加如下内容：

declare var ZOHOCRMTOPAPI: any;
declare var ZOHODESK: any;

2. 如果你在代码中需要调用Zoho扩展原生API，直接调用上面的全局变量即可，不需要额外引入npm包。

第四步：调整ZET项目的manifest.json配置 #

打开Zoho项目根目录的manifest.json，确认对应页面的入口指向正确：

• 如果你是侧边栏扩展，确认widgets数组中对应组件的url字段值为index.html
• 调整csp配置，或者把Angular的inline script哈希添加到csp白名单，避免代码被拦截
  示例配置片段：

{
  "widgets": [
    {
      "name": "custom_sidebar",
      "url": "index.html",
      "location": "crm.record.tab"
    }
  ],
  "csp": {
    "script-src": ["'self'", "'unsafe-inline'", "'unsafe-eval'"]
  }
}

第五步：验证运行流程 #

1. 在Angular项目目录执行ng build --configuration production完成构建
2. 切换到Zoho项目目录执行zet run启动本地服务
3. 打开Zoho后台的扩展测试页面，允许不安全脚本运行即可看到Angular渲染的内容

常见坑点排查 #

• 若打包后仍然空白，打开浏览器控制台查看资源加载错误，大概率是路径配置错误，确认所有js/css资源的引用路径都是相对路径
• 路由跳转失效：不要使用Angular的PathLocationStrategy，改用HashLocationStrategy哈希路由模式，适配Zoho的容器环境
• Zoho API调用报错：确认代码调用API的时机在Angular组件挂载完成之后，不要在constructor中调用Zoho全局API

内容的提问来源于stack exchange，提问作者Praveen Bhusal