Angular 18执行ng build生成index.csr.html而非index.html问题求助

问题原因 #

Angular 18调整了SSR/CSR的构建输出规则，当项目存在SSR相关配置（哪怕是框架自动生成的默认配置），CSR产物会被命名为index.csr.html，而非传统的index.html，这直接导致依赖入口文件index.html的Firebase Hosting部署失败。

解决方案 #

1. 强制禁用SSR构建 #

在构建命令中添加--ssr false参数，强制生成标准的index.html：

ng build --ssr false

如果是在GitHub Action的构建步骤中，直接修改对应命令即可。

2. 修改angular.json配置 #

打开项目根目录的angular.json，找到目标项目的build配置节点，明确指定输出文件名并禁用SSR：

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:application",
    "options": {
      "index": "src/index.html",
      "outputPath": "dist/your-project-name",
      "ssr": false
    }
  }
}

替换your-project-name为你的项目实际输出目录名称。

3. 部署阶段自动重命名（临时兼容方案） #

如果暂时不想调整构建配置，可在GitHub Action的部署步骤前添加重命名命令：

mv dist/your-project-name/index.csr.html dist/your-project-name/index.html

附：构建输出日志 #

Application bundle generation complete. [15.184 seconds]

▲ [WARNING] Module 'undici' used by 'node_modules/@firebase/auth-compat/dist/esm/index.node.esm.js' is not ESM

  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies


▲ [WARNING] Module 'undici' used by 'node_modules/@firebase/auth/dist/node-esm/internal.js' is not ESM

  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies


▲ [WARNING] Module 'faye-websocket' used by 'node_modules/@firebase/database/dist/node-esm/index.node.esm.js' is not ESM

  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies

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