Angular 12 SSR结合i18n双语言（英/韩）部署配置问题求解

问题根源 #

你当前的报错核心是硬编码了en语言的资源路径，访问/ko路径时服务端仍从/en目录加载静态资源和模板，导致前端资源404、页面加载失败。

具体修改步骤 #

1. 调整 server.ts 核心逻辑 #

删除原来硬编码的distFolder定义、server.set('views', distFolder)、server.use(express.static(distFolder))代码，替换为以下逻辑：
首先导入依赖：

import { existsSync } from 'fs';
import { APP_BASE_HREF } from '@angular/common';

新增语言检测、动态资源匹配、SSR渲染逻辑：

// 定义支持的语言和默认语言
const supportedLangs = ['en', 'ko'];
const defaultLang = 'en';

// 语言跳转中间件：根路径自动跳转默认语言，非法语言路径跳转默认语言
server.use((req, res, next) => {
  const pathLang = req.path.split('/')[1];
  if (req.path === '/') {
    return res.redirect(301, `/${defaultLang}`);
  }
  if (!supportedLangs.includes(pathLang)) {
    return res.redirect(301, `/${defaultLang}${req.path}`);
  }
  next();
});

// 动态托管对应语言的静态资源
server.get('*.*', (req, res, next) => {
  const pathLang = req.path.split('/')[1] as 'en'|'ko';
  const langDistPath = join(process.cwd(), `dist/ecokrypt-uiapp/browser/${pathLang}`);
  const targetFilePath = join(langDistPath, req.path.slice(pathLang.length + 1));
  if (existsSync(targetFilePath)) {
    return res.sendFile(targetFilePath);
  }
  next();
});

// 动态渲染对应语言的SSR页面
server.get('*', (req, res) => {
  const pathLang = req.path.split('/')[1] as 'en'|'ko';
  const langDistPath = join(process.cwd(), `dist/ecokrypt-uiapp/browser/${pathLang}`);
  const indexHtml = existsSync(join(langDistPath, 'index.original.html')) ? 'index.original.html' : 'index.html';
  // 动态加载对应语言的服务端入口
  const AppServerModule = require(`./dist/ecokrypt-uiapp/server/${pathLang}/main`).AppServerModule;

  res.render(indexHtml, {
    req,
    providers: [{ provide: APP_BASE_HREF, useValue: `/${pathLang}` }]
  });
});

如果TypeScript提示动态导入的类型错误，在require行上方加// @ts-ignore忽略即可。

2. 确认angular.json配置 #

确保projects -> 你的项目名 -> architect -> build -> options下没有硬编码baseHref配置，localize: true配置在build和server目标下都已正确添加。

3. 执行构建启动 #

执行常规SSR构建命令即可：

ng build --prod
ng run 你的项目名:server:prod

构建完成后启动Node服务即可正常访问：

• 访问mysitename.com自动301跳转到mysitename.com/en
• 访问mysitename.com/ko正常加载韩文SSR页面

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