Angular Universal 14多语言路由预渲染问题求助

1. 明确预渲染路由列表 #

在angular.json的prerender配置中，必须手动列出所有需要预渲染的多语言路由，动态通配符无法被预渲染工具识别：

"prerender": {
  "builder": "@nguniversal/builders:prerender",
  "options": {
    "routes": [
      "/en",
      "/en/tickets",
      "/zh",
      "/zh/tickets"
      // 其他需要预渲染的多语言路由
    ]
  },
  "configurations": {
    "production": {
      "browserTarget": "project:name:build:production"
    }
  }
}

如果路由数量较多，可以写个脚本自动生成路由列表，再传入配置。

2. 适配服务端的ngx-translate初始化逻辑 #

在server.ts中，从请求URL提取语言前缀，提前初始化翻译服务，确保预渲染时加载对应语言的翻译文件：

import { TranslateService } from '@ngx-translate/core';
import { APP_BASE_HREF } from '@angular/common';

server.get('*', (req, res) => {
  // 从URL路径提取语言参数（比如/en/tickets中的en）
  const lang = req.url.split('/')[1] || 'en';
  const translateService = app.injector.get(TranslateService);
  
  translateService.setDefaultLang('en');
  translateService.use(lang);

  res.render(indexHtml, {
    req,
    providers: [
      { provide: APP_BASE_HREF, useValue: req.baseUrl }
    ]
  });
});

同时确保服务端模块中的TranslateModule配置支持服务端加载翻译文件，比如使用兼容服务端的TranslateLoader实现。

3. 排查路由守卫的预渲染拦截 #

如果路由配置了CanActivate等守卫，需要判断预渲染环境并放行：

import { isPlatformServer } from '@angular/common';
import { Inject, PLATFORM_ID } from '@angular/core';

constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

canActivate(): boolean {
  // 预渲染阶段跳过守卫逻辑
  if (isPlatformServer(this.platformId)) {
    return true;
  }
  // 正常环境下的守卫逻辑
  return true;
}

4. 验证预渲染命令与输出 #

执行预渲染命令时指定生产环境配置：

ng run project:name:prerender:production

执行完成后检查dist/project:name/browser目录，确认是否生成了en/、zh/等语言子文件夹及对应预渲染页面。

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