Traduisez votre application Analog (Angular) avec Intlayer | Internationalisation (i18n)

Table des matières

Pourquoi Intlayer plutôt que des alternatives ?

Par rapport aux solutions principales telles que ngx-translate ou angular-l10n, Intlayer est une solution dotée d'optimisations intégrées telles que :

Guide étape par étape pour configurer Intlayer dans une application Analog

Voir le Modèle d'application sur GitHub.

1. 1

   Installer les dépendances

   Installez les packages nécessaires à l'aide de npm :

   bash

   Copier le contenu

   Copier le code

   Copier le code dans le presse-papiers

   npm install intlayer angular-intlayer vite-intlayernpx intlayer init

   • intlayer

     Le package principal qui fournit des outils d'internationalisation pour la gestion de la configuration, la traduction, la déclaration de contenu, la transpilation et les commandes CLI.

   • angular-intlayer Le package qui intègre Intlayer avec l'application Angular. Il fournit des fournisseurs de contexte et des hooks pour l'internationalisation d'Angular.

   • vite-intlayer Le package qui intègre Intlayer avec Vite. Il fournit un plugin pour gérer les fichiers de déclaration de contenu et configure des alias pour des performances optimales.

2. 2

   Configuration de votre projet

   Créez un fichier de configuration pour configurer les langues de votre application :

   intlayer.config.ts

   Copier le contenu

   Copier le code

   Copier le code dans le presse-papiers

   import { Locales, type IntlayerConfig } from "intlayer";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [
         Locales.ENGLISH,
         Locales.FRENCH,
         Locales.SPANISH,
         // Vos autres locales
       ],
       defaultLocale: Locales.ENGLISH,
     },
   };
   
   export default config;

   Grâce à ce fichier de configuration, vous pouvez configurer des URL localisées, la redirection de middleware, les noms de cookies, l'emplacement et l'extension de vos déclarations de contenu, désactiver les logs Intlayer dans la console, et plus encore. Pour une liste complète des paramètres disponibles, reportez-vous à la documentation de configuration.

3. 3

   Intégrer Intlayer dans votre configuration Vite

   Pour intégrer Intlayer avec Analog, vous devez utiliser le plugin vite-intlayer.

   Modifiez votre fichier vite.config.ts :

   vite.config.ts

   Copier le contenu

   Copier le code

   Copier le code dans le presse-papiers

   import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";import analog from "@analogjs/platform";// https://vitejs.dev/config/export default defineConfig(() => ({  plugins: [    analog(),    intlayer(), // Ajouter le plugin Intlayer  ],}));

   Le plugin intlayer() configure Vite avec Intlayer. Il gère les fichiers de déclaration de contenu et configure des alias pour des performances optimales.

4. 4

   Déclarer votre contenu

   Créez et gérez vos déclarations de contenu pour stocker les traductions :

   Vos déclarations de contenu peuvent être définies n'importe où dans votre application tant qu'elles sont incluses dans le répertoire contentDir (par défaut, ./src). Et correspondent à l'extension de fichier de déclaration de contenu (par défaut, .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).

   Pour plus de détails, reportez-vous à la documentation de déclaration de contenu.

5. 5

   Utiliser Intlayer dans votre code

   Pour utiliser les fonctionnalités d'internationalisation d'Intlayer dans toute votre application Analog, vous devez fournir Intlayer dans la configuration de votre application.

   src/app/app.config.ts

   Copier le contenu

   Copier le code

   Copier le code dans le presse-papiers

   import { ApplicationConfig } from "@angular/core";import { provideIntlayer } from "angular-intlayer";export const appConfig: ApplicationConfig = {  providers: [    provideIntlayer(), // Ajouter le fournisseur Intlayer ici  ],};

   Ensuite, vous pouvez utiliser la fonction useIntlayer dans n'importe quel composant.

   src/app/pages/index.page.ts

   Copier le contenu

   Copier le code

   Copier le code dans le presse-papiers

   import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({  selector: "app-home",  standalone: true,  template: `    <div class="content">      <h1>{{ content().title }}</h1>      <p>{{ content().congratulations }}</p>    </div>  `,})export default class HomeComponent {  content = useIntlayer("app");}

   Le contenu Intlayer est retourné sous forme de Signal, vous accédez donc aux valeurs en appelant le signal : content().title.

6. 6

   Changer la langue de votre contenu

   Facultatif

   Pour changer la langue de votre contenu, vous pouvez utiliser la fonction setLocale fournie par la fonction useLocale. Cela vous permet de définir la locale de l'application et de mettre à jour le contenu en conséquence.

   Créez un composant pour basculer entre les langues :

   src/app/locale-switcher.component.ts

   Copier le contenu

   Copier le code

   Copier le code dans le presse-papiers

   import { Component } from "@angular/core";import { CommonModule } from "@angular/common";import { useLocale } from "angular-intlayer";@Component({  selector: "app-locale-switcher",  standalone: true,  imports: [CommonModule],  template: `    <div class="locale-switcher">      <select        [value]="locale()"        (change)="setLocale($any($event.target).value)"      >        @for (loc of availableLocales; track loc) {          <option [value]="loc">{{ loc }}</option>        }      </select>    </div>  `,})export class LocaleSwitcherComponent {  localeCtx = useLocale();  locale = this.localeCtx.locale;  availableLocales = this.localeCtx.availableLocales;  setLocale = this.localeCtx.setLocale;}

   Ensuite, utilisez ce composant dans vos pages :

   src/app/pages/index.page.ts

   Copier le contenu

   Copier le code

   Copier le code dans le presse-papiers

   import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";import { LocaleSwitcherComponent } from "../locale-switcher.component";@Component({  selector: "app-home",  standalone: true,  imports: [LocaleSwitcherComponent],  template: `    <app-locale-switcher></app-locale-switcher>    <div class="content">      <h1>{{ content().title }}</h1>      <p>{{ content().congratulations }}</p>    </div>  `,})export default class HomeComponent {  content = useIntlayer("app");}

Configurer TypeScript

Intlayer utilise l'augmentation de module pour bénéficier de TypeScript et rendre votre codebase plus solide.

Assurez-vous que votre configuration TypeScript inclut les types autogénérés.

{  // ... Vos configurations TypeScript existantes  "include": [    // ... Vos configurations TypeScript existantes    ".intlayer/**/*.ts", // Inclure les types auto-générés  ],}

Configuration Git

Il est recommandé d'ignorer les fichiers générés par Intlayer. Cela vous évite de les commettre dans votre dépôt Git.

Pour ce faire, vous pouvez ajouter les instructions suivantes à votre fichier .gitignore :

#  Ignorer les fichiers générés par Intlayer.intlayer

Extension VS Code

Pour améliorer votre expérience de développement avec Intlayer, vous pouvez installer l'extension officielle Intlayer VS Code.

Installer depuis le VS Code Marketplace

Cette extension fournit :

• Autocomplétion pour les clés de traduction.
• Détection d'erreurs en temps réel pour les traductions manquantes.
• Aperçus en ligne du contenu traduit.
• Actions rapides pour créer et mettre à jour facilement les traductions.

Pour plus de détails sur l'utilisation de l'extension, reportez-vous à la documentation de l'extension Intlayer VS Code.

Aller plus loin

Pour aller plus loin, vous pouvez implémenter l'éditeur visuel ou externaliser votre contenu à l'aide du CMS.