Angular 18 SSR开启optimization=true时无法识别igv.js求助

可能的原因及对应解决步骤 #

1. 脚本路径配置不完整 #

angular.json中scripts数组里的igv.js路径未指向正确的包内文件，开发模式下webpack路径解析宽松，生产模式下严格匹配。修改为完整路径：

"scripts": [
  "node_modules/swagger-ui-dist/swagger-ui-bundle.js",
  "node_modules/swagger-ui-dist/swagger-ui-standalone-preset.js",
  "node_modules/igv/dist/igv.js"
],

2. 未指定脚本仅在客户端注入 #

SSR环境下，angular.json脚本默认同时注入服务器端和客户端，但igv.js是纯客户端库，服务器端无法识别，生产优化时易出异常。为igv.js添加客户端专属注入配置：

"scripts": [
  "node_modules/swagger-ui-dist/swagger-ui-bundle.js",
  "node_modules/swagger-ui-dist/swagger-ui-standalone-preset.js",
  {
    "input": "node_modules/igv/dist/igv.js",
    "inject": "client"
  }
],

3. 动态导入与全局脚本加载冲突 #

同时使用全局脚本注入和动态import('igv')会导致生产打包时模块解析混乱，可二选一调整：

• 方案一：移除全局脚本，保留动态导入
  删除angular.json中igv.js的配置，确保igv依赖已在package.json中安装，同时在tsconfig.json启用合成默认导入：

  {
    "compilerOptions": {
      "allowSyntheticDefaultImports": true
    }
  }
  

• 方案二：保留全局脚本，直接用全局变量
  既然已全局注入igv.js，可直接访问全局igv变量，无需动态导入：

  ngAfterViewInit() {
    if (this.isBrowser) {
      const igv = (window as any).igv;
      if (igv && typeof igv.createBrowser === 'function') {
        this.igvModule = igv;
      } else {
        console.error('igv.createBrowser is not a function');
      }
    }
  }
  

4. Tree-shaking误删依赖 #

生产模式的optimization启用tree-shaking后，可能误判igv.js为未使用代码。在angular.json生产配置中添加白名单：

"configurations": {
  "production": {
    // 现有配置...
    "allowedCommonJsDependencies": ["igv"]
  }
}

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