J'essaie d'utiliser Angulaire officiel de l'internationalisation des outils angulaire universelle. Jusqu'à présent, je suis capable de traduire le le rendu côté client à l'aide de la procédure suivante (merci pour cette réponse https://stackoverflow.com/a/40930110/1110635) :
- Je ajouter "i18n" attributs comme indiqué dans la documentation de mes modèles :
./src/+app/about/about.component.html :
<h1 i18n="H1 of the about component">About</h1>
...
Puis-je exécuter :
./node_modules/.bin/ng-xi18n
pour générer la base de messages.xlf fichier.
Puis-je copier ce fichier pour chaque pays je veux soutenir que "les messages.[paramètres régionaux].xlf" dans une "locale" du dossier. Quand tout est prêt, j'ai créer un "messages.[paramètres régionaux].ts" pour chaque xlf fichier contenant un produit exporté chaîne de son contenu :
./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>
`;
Enfin, mon client.ts fichier se présente comme suit :
./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);
Cela fonctionne et de faire de la "côté client" application fonctionne comme prévu. "À propos" est remplacé par "A propos". MAIS, parce angulaire universelle pré-rendu de la page sur le côté serveur à l'aide d'exprimer le texte n'est pas traduit, jusqu'à ce que le côté client ou initier est fait.
Donc, quand vous allez d'abord sur la page "à Propos" pendant environ 1 seconde avant le côté client de coups de pied dans une de le remplacer par "A propos".
La solution semble évidente, il suffit de lancer le service de traduction sur le côté serveur ! Mais je n'ai aucune idée de comment faire cela.
Mon serveur.ts ressemble à ceci :
./src/serveur.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}`);
});
Je n'ai pas d'accès direct à la bootstrapModule méthode comme sur le côté client. Les fournisseurs principaux sur le "createEngine" paramètre de l'objet était déjà là à l' origine du serveur.ts code.
Ce qui me manque?
