通用i18n服务器
我正在尝试与i18n一起使用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提供了正确的服务器端应用翻译。
我假设你的网址是针对所有英文网站(“/ en /”作为基础)的“/ en / sample”和意大利网站的“/ 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
})
})
});
如果您有任何问题,请随时提问。
链接地址: http://www.djcxy.com/p/31401.html下一篇: Angular 5 app with server rendering with Angular Universal on App Engine