Démarrage rapide avec Angular

Installe la CLICopier le lien vers cette section

npm install --save-dev @verbatra/cli

verbatra est un outil de développement et n'est jamais livré dans ton app. Les commandes ci-dessous utilisent npx ; avec pnpm, yarn ou bun, lance plutôt pnpm verbatra, yarn verbatra ou bun run verbatra.

Ajoute un fichier de locale sourceCopier le lien vers cette section

Si src/assets/i18n/en.json existe déjà, passe cette étape. Sinon, crée-le avec deux textes, dont un avec un placeholder :

{
  "greeting": "Hello, {{name}}!",
  "cart": {
    "empty": "Your cart is empty."
  }
}

Génère une configurationCopier le lien vers cette section

npx @verbatra/cli init --format ngx-translate-json --provider gemini --yes

--format ngx-translate-json est le format de fichier de @ngx-translate/core. init trouve tes fichiers de locale, ou écrit le motif src/assets/i18n/{locale}.json quand il n'y en a pas encore. --yes reprend ce que init a détecté au lieu de poser des questions. Le nouveau verbatra.config.ts traduit de en vers de ; ajoute des codes à targetLocales pour d'autres langues.

Prévisualise l'exécution sans cléCopier le lien vers cette section

npx @verbatra/cli translate --dry-run

verbatra: dry run over 1 locale, no provider call
verbatra: de done, 2 would translate
verbatra translate (dry run)
  de: 2 would translate, 0 unchanged
1 succeeded, 0 partial, 0 failed (dry run: nothing written)
[ok] dry run done in 0.0s, nothing written
next: verbatra translate (run it for real)

Une exécution à blanc ne construit aucun fournisseur : elle n'a pas besoin de clé, ne dépense rien et n'écrit rien.

TraduisCopier le lien vers cette section

cp .env.example .env

Ouvre .env et colle ta clé après GEMINI_API_KEY=. Pas encore de clé ? Gemini a une offre gratuite : crées-en une dans Google AI Studio. Les autres fournisseurs et leurs variables sont sur Fournisseurs.

npx @verbatra/cli translate

verbatra envoie les deux textes à Gemini, vérifie que chaque placeholder a survécu et écrit src/assets/i18n/de.json. La formulation dépend du modèle, par exemple :

{
  "greeting": "Hallo, {{name}}!",
  "cart": {
    "empty": "Dein Warenkorb ist leer."
  }
}

Vérifie que chaque locale est synchroniséeCopier le lien vers cette section

npx @verbatra/cli check

[ok] checking the locales (0.0s)
verbatra check
  de: 0 missing, 0 stale, 2 up-to-date (in sync)
all locales in sync

check n'appelle aucun fournisseur et se termine avec 1 dès qu'une locale n'est plus synchronisée : il peut donc protéger une pull request.

Charge les locales dans ton appCopier le lien vers cette section

Ajoute @ngx-translate/core :

npm install @ngx-translate/core @ngx-translate/http-loader

Puis charge les deux fichiers et affiche la salutation :

import { provideHttpClient } from "@angular/common/http";
import type { ApplicationConfig } from "@angular/core";
import { provideTranslateService } from "@ngx-translate/core";
import { provideTranslateHttpLoader } from "@ngx-translate/http-loader";

export const appConfig: ApplicationConfig = {
  providers: [
    // keep the providers the Angular CLI generated, and add:
    provideHttpClient(),
    provideTranslateService({
      lang: "de",
      fallbackLang: "en",
      loader: provideTranslateHttpLoader({ prefix: "./assets/i18n/", suffix: ".json" }),
    }),
  ],
};

import { Component } from "@angular/core";
import { TranslatePipe } from "@ngx-translate/core";

@Component({
  selector: "app-root",
  imports: [TranslatePipe],
  template: `<p>{{ 'greeting' | translate: { name: 'Ada' } }}</p>`,
})
export class App {}

// projects.<name>.architect.build.options
"assets": [
  { "glob": "**/*", "input": "public" },
  { "glob": "**/*", "input": "src/assets", "output": "assets" }
]

Lance ton app : la salutation affiche Hallo, Ada!.