Angular 21 (Vite) web sitenizi Intlayer kullanarak çevirin | Uluslararasılaştırma (i18n)

İçindekiler

Intlayer Nedir?

Intlayer, modern web uygulamalarında çok dilli desteği basitleştirmek için tasarlanmış yenilikçi, açık kaynaklı bir uluslararasılaştırma (i18n) kütüphanesidir.

Intlayer ile şunları yapabilirsiniz:

• Bileşen düzeyinde bildirimsel sözlükler kullanarak çevirileri kolayca yönetin.
• Meta verileri, rotaları ve içeriği dinamik olarak yerelleştirin.
• Otomatik tamamlamayı ve hata algılamayı iyileştiren otomatik oluşturulmuş türlerle TypeScript desteği sağlayın.
• Dinamik yerel ayar algılama ve değiştirme gibi gelişmiş özelliklerden yararlanın.

Intlayer'ı Bir Angular Uygulamasına Kurmak İçin Adım Adım Kılavuz

GitHub'da Uygulama Şablonunu görüntüleyin.

Adım 1: Bağımlılıkları Yükleyin

Gerekli paketleri npm kullanarak kurun:

npm install intlayer angular-intlayernpm install @angular-builders/custom-esbuild --save-devnpx intlayer init

• intlayer

  Yapılandırma yönetimi, çeviri, içerik bildirimi, dönüştürme ve CLI komutları için uluslararasılaştırma araçları sağlayan çekirdek paket.

• angular-intlayer Intlayer'ı Angular uygulamasıyla bütünleştiren paket. Angular uluslararasılaştırması için bağlam sağlayıcılar ve kancalar sunar.

• @angular-builders/custom-esbuild Angular CLI'nin esbuild yapılandırmasını özelleştirmek için gereklidir.

Adım 2: Projenizin Yapılandırması

Uygulamanızın dillerini yapılandırmak için bir yapılandırma dosyası oluşturun:

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

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      // Diğer dilleriniz
    ],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

Bu yapılandırma dosyası aracılığıyla yerelleştirilmiş URL'ler, ara yazılım yönlendirmesi, çerez adları, içerik bildirimlerinizin konumu ve uzantısı oluşturabilir, konsoldaki Intlayer günlüklerini devre dışı bırakabilir ve daha fazlasını yapabilirsiniz. Kullanılabilir parametrelerin tam listesi için yapılandırma belgelerine başvurun.

Adım 3: Intlayer'ı Angular Yapılandırmanıza Entegre Edin

Intlayer'ı Angular CLI ile bütünleştirmek için özel bir oluşturucu (builder) kullanmanız gerekir. Bu kılavuz, Vite/esbuild kullandığınızı (Angular 21 projeleri için varsayılan) varsaymaktadır.

Öncelikle, angular.json dosyanızı özel esbuild oluşturucuyu kullanacak şekilde değiştirin. build ve serve yapılandırmalarını güncelleyin:

{  "projects": {    "your-app-name": {      "architect": {        "build": {          "builder": "@angular-builders/custom-esbuild:application", // replace "@angular/build:application"          "options": {            "define": {              "process.env": "{}",            },            "plugins": ["./esbuild.plugins.ts"],            "browser": "src/main.ts",            // ...          },        },        "serve": {          "builder": "@angular-builders/custom-esbuild:dev-server", // replace "@angular/build:dev-server"          "options": {            "prebundle": {              "exclude": [                "intlayer",                "angular-intlayer",                "@intlayer/config/built",                "@intlayer/core"              ]          },        },      },    },  },}

angular.json içindeki your-app-name ifadesini projenizin gerçek adıyla değiştirdiğinizden emin olun.

Ardından, projenizin kök dizininde bir esbuild.plugins.ts dosyası oluşturun:

import { intlayerEsbuildPlugin } from "angular-intlayer/esbuild";export default [intlayerEsbuildPlugin()];

intlayerEsbuildPlugin işlevi, esbuild'i Intlayer ile yapılandırır. İçerik beyan dosyalarını işlemek için eklentiyi yerleştirir ve optimum performans için takma adlar kurar.

NX kullanıcıları: NX'in Angular derleyicileri, eklenti dosyalarını Node'un yerel ESM çözünürlüğü aracılığıyla yükler ve TypeScript eklenti dosyalarını anında derlemez. Bunun yerine bir .mjs dosyası kullanın ve angular.json dosyasındaki plugins referansını buna göre güncelleyin:

esbuild.plugins.mjs

İçeriği kopyala

Kodu kopyala

Kodu panoya kopyala

import { intlayerEsbuildPlugin } from "angular-intlayer/esbuild";export default [intlayerEsbuildPlugin()];

Ardından angular.json içinde "./esbuild.plugins.ts" yerine "./esbuild.plugins.mjs" değerini gösterin.

Adım 4: İçeriğinizi Bildirin

Çevirileri depolamak için içerik bildirimlerinizi oluşturun ve yönetin:

İçerik bildirimleriniz, contentDir dizinine (varsayılan olarak ./src) eklendiği sürece uygulamanızın herhangi bir yerinde tanımlanabilir. Ayrıca içerik bildirimi dosya uzantısıyla (varsayılan olarak .content.{json,ts,tsx,js,jsx,mjs,cjs}) eşleşmelidir.

Daha fazla ayrıntı için içerik bildirimi belgelerine bakın.

Adım 5: Kodunuzda Intlayer'dan Yararlanın

Tüm Angular uygulamanız boyunca Intlayer'ın uluslararasılaştırma özelliklerinden yararlanmak için, Intlayer'ı uygulamanızın yapılandırmasında sağlamanız gerekir.

import { ApplicationConfig } from "@angular/core";import { provideRouter } from "@angular/router";import { provideIntlayer } from "angular-intlayer";import { routes } from "./app.routes";export const appConfig: ApplicationConfig = {  providers: [    provideRouter(routes),    provideIntlayer(), // Intlayer sağlayıcısını buraya ekleyin  ],};

Ardından, herhangi bir bileşende useIntlayer işlevini kullanabilirsiniz.

import { Component } from "@angular/core";import { RouterOutlet } from "@angular/router";import { useIntlayer } from "angular-intlayer";@Component({  selector: "app-root",  standalone: true,  imports: [RouterOutlet],  templateUrl: "./app.component.html",  styleUrl: "./app.component.css",})export class AppComponent {  content = useIntlayer("app");}

Ve şablonunuzda:

<div class="content">  <h1>{{ content().title }}</h1>  <p>{{ content().congratulations }}</p></div>

Intlayer içeriği bir Signal olarak döndürülür, böylece değerlere sinyali çağırarak erişebilirsiniz: content().title.

(İsteğe Bağlı) Adım 6: İçeriğinizin dilini değiştirin

İçeriğinizin dilini değiştirmek için, useLocale işlevinin sağladığı setLocale işlevini kullanabilirsiniz. Bu, uygulamanın yerel ayarını belirlemenize ve içeriği buna göre güncellemenize olanak tanır.

Diller arasında geçiş yapmak için bir bileşen oluşturun:

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

Sonra bu bileşeni app.component.ts dosyanızda kullanın:

import { Component } from "@angular/core";import { RouterOutlet } from "@angular/router";import { useIntlayer } from "angular-intlayer";import { LocaleSwitcherComponent } from "./locale-switcher.component";@Component({  selector: "app-root",  standalone: true,  imports: [RouterOutlet, LocaleSwitcherComponent],  templateUrl: "./app.component.html",  styleUrl: "./app.component.css",})export class AppComponent {  content = useIntlayer("app");}

TypeScript'i Yapılandırın

Intlayer, TypeScript'in faydalarından yararlanmak ve kod tabanınızı daha güçlü kılmak için modül büyütme (Module Augmentation) kullanır.

TypeScript yapılandırmanızın otomatik oluşturulmuş türleri içerdiğinden emin olun.

{  // ... Mevcut TypeScript yapılandırmalarınız  "include": [    // ... Mevcut TypeScript yapılandırmalarınız    ".intlayer/**/*.ts", // Otomatik oluşturulan türleri dahil et  ],}

Git Yapılandırması

Intlayer tarafından oluşturulan dosyaları yoksaymanız önerilir. Bu, onları Git deponuza işlemenizi engeller.

Bunu yapmak için, .gitignore dosyanıza aşağıdaki talimatları ekleyebilirsiniz:

# Intlayer tarafından oluşturulan dosyaları yoksay.intlayer

VS Code Uzantısı

Intlayer ile geliştirme deneyiminizi geliştirmek için resmi Intlayer VS Code Extension'ı kurabilirsiniz.

VS Code Marketplace'ten yükleyin

Bu uzantı şunları sağlar:

• Çeviri anahtarları için otomatik tamamlama.
• Eksik çeviriler için gerçek zamanlı hata algılama.
• Çevrilmiş içeriğin satır içi önizlemeleri.
• Çevirileri kolayca oluşturmak ve güncellemek için hızlı eylemler.

Uzantının nasıl kullanılacağına dair daha fazla ayrıntı için Intlayer VS Code Uzantı belgelerine başvurun.

Daha İleri Gidin

Daha ileri gitmek için görsel düzenleyiciyi uygulayabilir veya CMS kullanarak içeriğinizi dışsallaştırabilirsiniz.