角度ユニバーサルの国際化ツールAngularを使用しようとしています。i18n（サーバ側レンダリング）を使用した角度ユニバーサル
./src：
私は私のテンプレートのドキュメントに記載されているように「国際化」は属性を追加します。これまでのところ私は（この答えhttps://stackoverflow.com/a/40930110/1110635のおかげで）、次の手順を使用して、クライアント側のレンダリングを翻訳することができますよ/+app/about/about.component.html：
<h1 i18n="H1 of the about component">About</h1>
...
は次に私が実行：
./node_modules/.bin/ng-xi18n
ベースMを生成しますessages.xlfファイル。
次に、 "ロケール"フォルダに "messages。[locale] .xlf"というファイルをコピーします。 準備ができて、私はそのコンテンツのエクスポートを含む文字列の各XLFファイルは、 "メッセージ[ロケール]を.TS" を作成します。
./locale/messages.fr.ts：
// TRANSLATION_FR is only for "messages.fr.ts" of course.
// I would create a TRANSLATION_ES const inside "messages.es.ts" for spanish for example.
export const TRANSLATION_FR: string = `<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="en" datatype="plaintext" original="ng2.template">
<body>
<trans-unit id="004b222ff9ef9dd4771b777950ca1d0e4cd4348a" datatype="html">
<source>About</source>
<target>A propos</target>
<note priority="1" from="description">H1 of the about component</note>
</trans-unit>
</body>
</file>
</xliff>
`;
は最後に、私のclient.tsファイルには、次のようになります。
./src/client.ts：
[...]
// i18n
import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID } from '@angular/core';
import { TRANSLATION_FR } from '../locale/messages.fr';
import { MainModule } from './browser.module';
export const platformRef = platformUniversalDynamic();
// on document ready bootstrap Angular 2
export function main() {
return platformRef.bootstrapModule(MainModule, {
providers: [
{provide: TRANSLATIONS, useValue: TRANSLATION_FR},
{provide: TRANSLATIONS_FORMAT, useValue: "xlf"},
{provide: LOCALE_ID, useValue: 'fr'}
]
});
}
bootloader(main);
これは動作し、 "クライアント側"アプリケーションを期待どおりに動作させます。 「約」を「A propos」に置き換えます。 BUT、角度ユニバーサルはエクスプレスを使用してサーバー側のページを事前レンダリングするため、クライアント側のブートストラップが完了するまでテキストが変換されません。あなたが最初のページに行くとき
は、だからあなたは「Proposの」と交換でクライアントサイドキックの前に約1秒間「について」を参照してください。
解決策は明らかですが、サーバー側で翻訳サービスを実行するだけです。しかし、私はそれをどうやって行うのか分かりません。はこのようになります
マイserver.ts：
./src/server.ts
[...]
// i18n
import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID } from '@angular/core';
import { TRANSLATION_FR } from '../locale/messages.fr';
const app = express();
const ROOT = path.join(path.resolve(__dirname, '..', 'dist'));
// Express View
app.engine('.html', createEngine({
ngModule: MainModule,
providers: [
/**
* HERE IS THE IMPORTANT PART.
* I tried to declare providers but it has no effect.
*/
{provide: TRANSLATIONS, useValue: TRANSLATION_FR},
{provide: TRANSLATIONS_FORMAT, useValue: "xlf"},
{provide: LOCALE_ID, useValue: 'fr'}
]
}));
app.set('port', process.env.PORT || 3000);
app.set('views', ROOT);
app.set('view engine', 'html');
[...]
function ngApp(req, res) {
res.render('index', {
req,
res,
preboot: false,
baseUrl: '/',
requestUrl: req.originalUrl,
originUrl: `http://localhost:${ app.get('port') }`
});
}
app.get('*', ngApp);
// Server
let server = app.listen(app.get('port'),() => {
console.log(`Listening on: http://localhost:${server.address().port}`);
});
私には何が欠けていますか？
こんにちは、*私はこれをやろうとしているが、私は使用しない翻訳用のファイルを.TSしかしそれはとても難しいです。だから、あなたはそれを解決しましたか？ – IvanMoreno
いいえサーバー側でネイティブモジュールを動作させる方法が見つからなかったため、ng2-translateを使用しています。しかし、私は上記の方法でそれを行うことができ、あなたのビルドツール（webpackやgulpまたは他のもの）が.xlfファイルから.tsファイルを作成できるようにします。 – Stnaire
これは実際に問題を解決するわけではありませんが、広く採用されているnx-translateモジュールの使用を検討しましたか？ https://github.com/ngx-translate/core –