Übersetzen Sie Ihre Analog (Angular) App mit Intlayer | Internationalisierung (i18n)

Inhaltsverzeichnis

Was ist Intlayer?

Intlayer ist eine innovative Open-Source-Internationalisierungsbibliothek (i18n), die entwickelt wurde, um die mehrsprachige Unterstützung in modernen Webanwendungen zu vereinfachen.

Mit Intlayer können Sie:

• Übersetzungen einfach verwalten durch deklarative Wörterbücher auf Komponentenebene.
• Metadaten, Routen und Inhalte dynamisch lokalisieren.
• TypeScript-Unterstützung sicherstellen durch automatisch generierte Typen, was die Autovervollständigung und Fehlererkennung verbessert.
• Von erweiterten Funktionen profitieren, wie dynamischer Spracherkennung und -umschaltung.

Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer in einer Analog-Anwendung

Siehe Anwendungsvorlage auf GitHub.

Schritt 1: Abhängigkeiten installieren

Installieren Sie die erforderlichen Pakete mit npm:

npm install intlayer angular-intlayer vite-intlayernpx intlayer init

• intlayer

  Das Kernpaket, das Internationalisierungswerkzeuge für Konfigurationsmanagement, Übersetzung, Inhaltsdeklaration, Transpilierung und CLI-Befehle bereitstellt.

• angular-intlayer Das Paket, das Intlayer in die Angular-Anwendung integriert. Es bietet Kontext-Provider und Hooks für die Angular-Internationalisierung.

• vite-intlayer Das Paket, das Intlayer in Vite integriert. Es bietet ein Plugin zur Verarbeitung von Inhaltsdeklarationsdateien und richtet Aliase für optimale Leistung ein.

Schritt 2: Konfiguration Ihres Projekts

Erstellen Sie eine Konfigurationsdatei, um die Sprachen Ihrer Anwendung zu konfigurieren:

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      // Ihre anderen Locales
    ],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

Über diese Konfigurationsdatei können Sie lokalisierte URLs, Middleware-Weiterleitungen, Cookie-Namen, den Speicherort und die Erweiterung Ihrer Inhaltsdeklarationen festlegen, Intlayer-Protokolle in der Konsole deaktivieren und vieles mehr. Eine vollständige Liste der verfügbaren Parameter finden Sie in der Konfigurationsdokumentation.

Schritt 3: Intlayer in Ihre Vite-Konfiguration integrieren

Um Intlayer in Analog zu integrieren, müssen Sie das vite-intlayer-Plugin verwenden.

Ändern Sie Ihre vite.config.ts-Datei:

import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";import analog from "@analogjs/platform";// https://vitejs.dev/config/export default defineConfig(() => ({  plugins: [    analog(),    intlayer(), // Fügen Sie das Intlayer-Plugin hinzu  ],}));

Das intlayer()-Plugin konfiguriert Vite mit Intlayer. Es verarbeitet Inhaltsdeklarationsdateien und richtet Aliase für optimale Leistung ein.

Schritt 4: Deklarieren Sie Ihre Inhalte

Erstellen und verwalten Sie Ihre Inhaltsdeklarationen, um Übersetzungen zu speichern:

Ihre Inhaltsdeklarationen können überall in Ihrer Anwendung definiert werden, solange sie im Verzeichnis contentDir (standardmäßig ./src) enthalten sind und der Dateierweiterung für Inhaltsdeklarationen entsprechen (standardmäßig .content.{json,ts,tsx,js,jsx,mjs,cjs}).

Weitere Einzelheiten finden Sie in der Dokumentation zur Inhaltsdeklaration.

Schritt 5: Intlayer in Ihrem Code verwenden

Um die Internationalisierungsfunktionen von Intlayer in Ihrer gesamten Analog-Anwendung zu nutzen, müssen Sie Intlayer in Ihrer Anwendungskonfiguration bereitstellen.

import { ApplicationConfig } from "@angular/core";import { provideIntlayer } from "angular-intlayer";export const appConfig: ApplicationConfig = {  providers: [    provideIntlayer(), // Fügen Sie den Intlayer-Provider hier hinzu  ],};

Anschließend können Sie die Funktion useIntlayer in jeder Komponente verwenden.

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");}

Intlayer-Inhalte werden als Signal zurückgegeben, sodass Sie auf die Werte zugreifen, indem Sie das Signal aufrufen: content().title.

(Optional) Schritt 6: Ändern der Sprache Ihrer Inhalte

Um die Sprache Ihrer Inhalte zu ändern, können Sie die Funktion setLocale verwenden, die von der Funktion useLocale bereitgestellt wird. Dies ermöglicht es Ihnen, die Locale der Anwendung festzulegen und den Inhalt entsprechend zu aktualisieren.

Erstellen Sie eine Komponente zum Umschalten zwischen den Sprachen:

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;}

Verwenden Sie diese Komponente dann in Ihren Seiten:

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");}

TypeScript konfigurieren

Intlayer verwendet Modul-Augmentation, um die Vorteile von TypeScript zu nutzen und Ihre Codebasis robuster zu machen.

Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen enthält.

{  // ... Ihre bestehenden TypeScript-Konfigurationen  "include": [    // ... Ihre bestehenden TypeScript-Konfigurationen    ".intlayer/**/*.ts", // Fügen Sie die automatisch generierten Typen hinzu  ],}

Git-Konfiguration

Es wird empfohlen, die von Intlayer generierten Dateien zu ignorieren. Dies ermöglicht es Ihnen, sie nicht in Ihr Git-Repository zu übertragen.

Dazu können Sie die folgenden Anweisungen zu Ihrer .gitignore-Datei hinzufügen:

#  Von Intlayer generierte Dateien ignorieren.intlayer

VS Code Erweiterung

Um Ihre Entwicklungserfahrung mit Intlayer zu verbessern, können Sie die offizielle Intlayer VS Code Erweiterung installieren.

Installation über den VS Code Marketplace

Diese Erweiterung bietet:

• Autovervollständigung für Übersetzungsschlüssel.
• Fehlererkennung in Echtzeit für fehlende Übersetzungen.
• Inline-Vorschau von übersetzten Inhalten.
• Schnellaktionen, um Übersetzungen einfach zu erstellen und zu aktualisieren.

Weitere Informationen zur Verwendung der Erweiterung finden Sie in der Dokumentation zur Intlayer VS Code Erweiterung.

Weiterführende Informationen

Um weiter zu gehen, können Sie den visuellen Editor implementieren oder Ihre Inhalte mit dem CMS externalisieren.