通用 i18n 服务器端

Question

我正在尝试通过 i18n 使用 Universal。
我已经在构建应用程序并设置服务器配置，以便一旦应用程序进入浏览器端模式，用户就会被重定向到应用程序的正确翻译，这很好。

我遇到的问题是服务器端呈现。
express服务器设置的方式，我看不出如何提供universal的服务器端正确翻译，只显示默认语言而不是本地语言。
与浏览器端一样，我尝试为服务器端模式使用的 main.bundle 文件构建不同的版本，每种语言一个。问题是，我不能为每个应用程序设置多个文件。

Dist 文件夹结构：

dist/
  server.js
  browser/
    en/
      ...
    it/
      ...
  server/
    en/
      ...
      main.bundle // eng translation
    it/
      ...
      main.bundle // ita translation

server.ts 文件

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
// In this line I can only provide one file for the server-side translation,
// and I can't dynamically change it to the correct translation.
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = 
require("./dist/server/en/main.bundle"); 

app.engine("html", ngExpressEngine({
    bootstrap: AppServerModuleNgFactory,
    providers: [
        provideModuleMap(LAZY_MODULE_MAP),
    ],
}));

服务器端应用程序从第四行的 main.bundle 呈现。但是我无法为每个翻译提供一个，我该如何解决？
我的观点是让 Angular Universal 提供应用程序的正确服务器端翻译。

Answer 1

我假设您的 urls 对于所有英语网站（以“/en/”为基础）和“/sample”为意大利语网站（默认，基础）构建为“/en/sample” “/”）。如果此假设不正确，请根据您的需要调整此代码。基本上你想构建两个单独的引擎并根据调用的 url.

使用正确的引擎

// import your bundles
const itBundle = require('./dist/server/it/main.bundle');
const enBundle = require('./dist/server/en/main.bundle');

// define your engines for it and en
// id is needed to find the path
// base is for routing see below
const languageEngines = [{
  id: 'en',
  base: '/en/',
  engine: ngExpressEngine({
    bootstrap: enBundle.AppServerModuleNgFactory,
    providers: [provideModuleMap(enBundle.LAZY_MODULE_MAP)]
  })
},
{
  id: 'it',
  base: '',
  engine: ngExpressEngine({
    bootstrap: itBundle.AppServerModuleNgFactory,
    providers: [provideModuleMap(itBundle.LAZY_MODULE_MAP)]
  })
}];

// Load your engine
app.engine('html', (filePath, options, callback) => {
  options.engine(
    filePath,
    { req: options.req, res: options.res},
    callback
  )
});

app.set('view engine', 'html');

// handle en file routes
app.get('/en/*.*', express.static('./dist/browser'));
// file routes for it
app.get('*.*', express.static('./dist/browser/it'));

// handle routes for each language
languageEngines.forEach(languageEngine => {
  app.get(`${languageEngine.base}*`, (req, res) => {
    res.render(`./dist/browser/${languageEngine.id}/index.html`, {
      req,
      res,
      engine: languageEngine.engine
    })
  })
});

如果您有任何问题，请随时提出。

通用 i18n 服务器端

Universal i18n server-side

angular-i18n

angular-universal

angular