通用 i18n 服务器端 [英] Universal i18n server-side
问题描述
我正在尝试将 Universal 与 i18n 结合使用.
我已经在构建应用程序并设置服务器配置,这样一旦应用程序进入浏览器端模式,用户就会被重定向到应用程序的正确翻译,这很好.
I'm trying to use Universal with i18n.
I'm already building the app and setting the server config so that once the app passes to browser-side mode the user is redirected to the correct translation of the app, that is fine.
我遇到的问题在于服务器端渲染.
以express server的设置方式,我看不到如何提供通用的服务器端正确翻译,只显示默认语言而不是本地语言.
与浏览器端一样,我尝试为服务器端模式使用的 main.bundle 文件创建不同的版本,每种语言一个.问题是,我不能为每个应用设置多个文件.
The issue I'm having is in the server-side rendering.
With the way that the express server is set, I don't see how to provide the universal's server-side correct translation, and only the default language is being displayed instead of the local one.
Like with browser-side, I tried to have a different builds, one for each language, for the main.bundle file used by the server-side mode. Problem is, I can't set more than one of those files per app.
Dist 文件夹结构:
Dist folder structure:
dist/
server.js
browser/
en/
...
it/
...
server/
en/
...
main.bundle // eng translation
it/
...
main.bundle // ita translation
server.ts 文件
server.ts file
// * 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 为应用程序提供正确的服务器端翻译.
The server-side app is rendered from the main.bundle in the fourth line. However I don't get the possibility to provide one for each translation, how can I fix that?
My point is having Angular Universal provide the correct server-side translation of the app.
推荐答案
我假设您的网址对于所有英文站点(/en/"作为基础)构建为/en/sample",为您的网站构建为/sample"意大利语站点(默认,基/").如果此假设不正确,请根据您的需要调整此代码.基本上,您想构建两个单独的引擎,并根据调用的 url 使用正确的引擎.
I assume your urls are build like "/en/sample" for all english sites ("/en/" as base) and "/sample" for your italian sites (default, base "/"). If this assumption is incorrect adjust this code to your needs. Basically you want to build two seperate engines and use the correct one depending on the called 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
})
})
});
如果您有任何问题,请随时提出.
If you have questions feel free to ask.
这篇关于通用 i18n 服务器端的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!