执行build:ssr构建Angular Universal后dist/browser缺失index.html

核心报错原因 #

报错路径/Users/syahiruddin/RVI-clone/app/dist/functions/dist/functions/browser出现了明显的dist/functions重复拼接，同时browser构建产物未生成index.html，本质是构建配置、服务端路径配置双重错误导致的。

修复步骤 #

• 修正angular.json构建配置
  打开项目根目录的angular.json，找到projects -> 你的项目名 -> architect -> build -> options节点：
  1. 确认outputPath字段没有设置多层重复嵌套路径，标准SSR配置下浏览器端输出路径应为dist/[你的项目名]/browser，服务端（architect下的server节点）输出路径应为dist/[你的项目名]/server，不要直接把输出路径写到functions目录下的深层嵌套位置，避免后续路径拼接重复。
  2. 确认该节点下存在"index": "src/index.html"配置，同时检查src目录下的源index.html文件未被误删、重命名，该配置缺失会直接导致浏览器构建时不生成入口index.html文件。
• 修正服务端视图路径配置
  打开执行ng add @nguniversal/express-engine时生成的server.ts文件：
  1. 检查DIST_FOLDER常量定义，不要重复拼接路径，标准写法为const DIST_FOLDER = join(process.cwd(), 'dist/[你的项目名]');
  2. 检查express视图目录配置，不要在DIST_FOLDER后重复拼接多层路径，正确写法如下：

  app.set('views', join(DIST_FOLDER, 'browser'));
  app.set('view engine', 'html');
  app.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
  }));
  

• 清理缓存重新构建验证
  执行以下命令清理旧构建产物，避免错误配置的残留文件影响结果：

  rm -rf dist
  npm run build:ssr
  

  构建完成后先进入dist/[你的项目名]/browser目录，确认index.html文件正常生成，再执行npm run serve:ssr启动服务即可。

如果你是适配Firebase Functions等Serverless部署场景，建议构建完成后再把产物复制到functions目录，不要直接把Angular构建输出路径设到functions目录下的深层位置，极易出现路径拼接重复的问题。

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