Internationalisering med @angular/localize

Error: It looks like your application or one of its dependencies is using i18n.Angular 9 introduced a global `$localize()` function that needs to be loaded.Please run `ng add @angular/localize` from the Angular CLI.(For non-CLI projects, add `import '@angular/localize/init';` to your `polyfills.ts` file.For server-side rendering applications add the import to your `main.server.ts` file.)

ng add @angular/localize

{ "projects": { "ponyracer": { "projectType": "application", // ... "i18n": { "locales": { "fr": "src/locale/messages.fr.xlf", "es": "src/locale/messages.es.xlf", } }, "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", // ... "configurations": { "production": { // ... }, "fr": { "localize": }, "es": { "localize": } } }, "serve": { // ... "configurations": { "production": { // ... }, "fr": { "browserTarget": "ponyracer:build:fr" }, "es": { "browserTarget": "ponyracer:build:es" } } } // ...}

ng build --configuration=production,es

eller med alle sprogområder på én gang:

ng build --prod --localize

Dette er et stort fremskridt i forhold til tidligere Angular-versioner.Vi var tidligere nødt til at bygge den samme applikation for hvert sprogområde,da oversættelsen var en del af kompileringen.Nu, når Angular kompilerer applikationen, genererer den $localize-opkald. når det er gjort, tager et værktøj den kompilerede applikation og erstatter alle $localize-opkald med de rigtige oversættelser. det er super hurtigt. du har så et bundle, der ikke indeholder nogen opkald til $localize, og alle i18n-strenge er blevet oversat.

Hertil skulle du bygge din applikation én gang pr. locale, og det var et fuldt build. Så lad os sige, at det er en 30s build, og du ville have 4 locales, så var du i gang med 2 minutter.

Med den nye tilgang, kompileres der én gang, og derefter genereres de forskellige i18n-versioner på få sekunder(det genereres endda parallelt, hvis det er muligt).Så du går fra 2 minutter til ~40 sekunder! 🌈

Du har så flere bundles, en pr. locale, og du kan servere den passende til dine brugere afhængigt af deres præferencer, som du plejede at gøre.

Denne strategi kaldes compile-time inlining,da du inliner oversættelserne direkte,og så er der intet tilbage at gøre ved runtime.

Nu skal vi tale om noget, der stadig ikke er dokumenteret, som måske ændres i fremtiden, men som stadig er interessant at vide: Vi kan nu også oversætte meddelelser i vores TypeScript-kode!

Den $localize-funktion, jeg har talt om, kan bruges direkte. Det er en ejendommelig funktion, som du kan bruge til at tagge en skabelonstreng til lokalisering.

Men måske skal vi starte med at forklare, hvad en tagget skabelonstreng er?

Skabelonstrenge og tag-funktioner

Når du bruger skabelonstrenge, kan du definere en tag-funktion,og anvende den på en skabelonstreng.Her tilføjer askQuestion et forespørgselspunkt i slutningen af strengen:

const askQuestion = strings => strings + '?';const template = askQuestion`Is anyone here`;

Så hvad er forskellen med en simpel funktion?Tag-funktionen modtager faktisk flere argumenter:

• en array af de statiske dele af strengen
• værdierne som følge af evalueringen af udtrykkene

For eksempel hvis vi har en skabelonstreng, der indeholder udtryk:

const person1 = 'Cedric';const person2 = 'Agnes';const template = `Hello ${person1}! Where is ${person2}?`;

så modtager tag-funktionen de forskellige statiske og dynamiske dele.Her har vi en tag-funktion til at skrive hovedpersonernes navne med store bogstaver:

const uppercaseNames = (strings, ...values) => { // `strings` is an array with the static parts // `values` is an array with the evaluated expressions const names = values.map(name => name.toUpperCase()); // `names` now has // let's merge the `strings` and `names` arrays return strings.map((string, i) => `${string}${names ? names : ''}`).join('');};const result = uppercaseNames`Hello ${person1}! Where is ${person2}?`;// returns 'Hello CEDRIC! Where is AGNES?'

@Component({ template: '{{ title }}'})export class HomeComponent { title = $localize`You have 10 users`;}

No translation found for "6480943972743237078" ("You have 10 users").

<trans-unit> <source>You have 10 users</source> <target>Vous avez 10 utilisateurs</target></trans-unit>

title = $localize`Hi ${this.name}! You have ${this.users.length} users.`;

<trans-unit> <source>Hi <x/>! You have <x/> users.</source> <target>Bonjour <x/>&nbsp;! Vous avez <x/> utilisateurs.</target></trans-unit>

title = $localize`Hi ${this.name}:name:! You have ${this.users.length}:userCount: users.`;

<trans-unit> <source>Hi <x/>! You have <x/> users.</source> <target>Bonjour <x/>&nbsp;! Vous avez <x/> utilisateurs.</target></trans-unit>

<h1 i18n="@@home.greetings">Hello</h1>

<trans-unit> <source>Hello</source> <target>Bonjour</target></trans-unit>

title = $localize`:@@home.users:You have 10 users`;

title = $localize`:greeting message with the number of users currently logged in@@home.users:You have 10 users`;

import '@angular/localize/init';import { loadTranslations } from '@angular/localize';loadTranslations({ '1815172606781074132': 'Bonjour {$name}\xa0! Vous avez {$userCount} utilisateurs.'});