Angular SSR多语言路由配置：实现根域名默认访问英文版本

针对你已经配置好i18n多语言的Angular SSR应用，要实现mydomain.com直接访问英文版本、mydomain.com/en仍可访问英文、mydomain.com/fr访问法语的需求，按以下步骤操作：

1. 统一构建输出目录 #

先确保所有语言版本的构建产物都放在对应子目录中：

• 打开angular.json，找到projects -> 你的项目名 -> architect -> build -> options，修改outputPath为：

  "outputPath": "dist/你的项目名/{lang}"
  

• 执行构建命令生成多语言包：

  ng build --localize
  

  构建完成后，dist/你的项目名下会生成en和fr两个子目录，分别对应英文和法语的构建文件。

2. 修改SSR服务器（Express）逻辑 #

打开项目根目录的server.ts，调整请求处理规则，让根路径请求自动映射到英文版本：

第一步：定义语言常量 #

在文件顶部添加支持的语言列表和默认语言：

const supportedLanguages = ['en', 'fr'];
const defaultLanguage = 'en';

第二步：调整静态资源服务 #

替换原来的静态资源中间件配置，同时支持带语言前缀和根路径的资源请求：

// 处理带语言前缀的静态资源（如/en/assets/xxx）
app.use('/:lang', express.static(join(DIST_FOLDER, ':lang'), {
  maxAge: '1y',
  index: false,
}));
// 处理根路径的静态资源，默认指向英文版本的资源
app.use(express.static(join(DIST_FOLDER, defaultLanguage), {
  maxAge: '1y',
  index: false,
}));

第三步：修改SSR渲染路由 #

替换原来的app.get('*')逻辑，解析请求语言并渲染对应页面：

app.get('*', (req, res) => {
  let lang = defaultLanguage;
  const urlSegments = req.url.split('/');

  // 检查URL是否包含合法语言前缀
  if (urlSegments.length > 1 && supportedLanguages.includes(urlSegments[1])) {
    lang = urlSegments[1];
    // 移除语言前缀，让Angular路由处理剩余路径
    req.url = urlSegments.slice(2).join('/') || '/';
  }

  // 确认对应语言的index.html存在， fallback到默认语言
  const indexHtmlPath = existsSync(join(DIST_FOLDER, lang, 'index.html'))
    ? join(DIST_FOLDER, lang, 'index.html')
    : join(DIST_FOLDER, defaultLanguage, 'index.html');

  // 渲染页面并注入语言相关的依赖
  res.render(indexHtmlPath, {
    req,
    providers: [
      { provide: APP_BASE_HREF, useValue: `/${lang}` },
      { provide: LOCALE_ID, useValue: lang }
    ]
  });
});

3. 调整Angular路由配置 #

在app-routing.module.ts中，保持路由配置简洁即可，因为服务器端已经处理了语言前缀的解析：

const routes: Routes = [
  { path: '', component: HomeComponent }, // 根路径对应首页
  // 其他业务路由配置...
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    initialNavigation: 'enabledBlocking',
    useHash: false
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

4. 验证效果 #

启动SSR服务器后测试：

• 访问http://localhost:4000，直接显示英文版本
• 访问http://localhost:4000/en，同样显示英文版本
• 访问http://localhost:4000/fr，正常显示法语版本

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