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

İçindekiler

Neden alternatifler yerine Intlayer?

'ngx-translate' veya 'angular-l10n' gibi ana çözümlerle karşılaştırıldığında Intlayer, aşağıdaki gibi entegre optimizasyonlarla gelen bir çözümdür:

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

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

1. 1

   Bağımlılıkları Yükleyin

   Gerekli paketleri npm kullanarak kurun:

   bash

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   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.

2. 2

   Projenizin Yapılandırması

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

   intlayer.config.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   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.

3. 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:

   angular.json

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   {  "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:

   esbuild.plugins.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   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.

4. 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,md,mdx,yaml,yml}) eşleşmelidir.

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

5. 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.

   src/app/app.config.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   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.

   src/app/app.component.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   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:

   src/app/app.component.html

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   <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.

6. 6

   İçeriğinizin dilini değiştirin

   İsteğe bağlı

   İç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:

   src/app/locale-switcher.component.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   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:

   src/app/app.component.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   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.