Intlayer kullanarak Angular 19 (Webpack) web sitenizi ç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:

Angular Uygulamasında Intlayer Kurulumu İçin Adım Adım Kılavuz

GitHub'daki Uygulama Şablonuna bakın.

1. 1

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

   Gerekli paketleri npm kullanarak yükleyin:

   bash

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

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

   • intlayer

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

   • angular-intlayer Intlayer'ı Angular uygulamasıyla entegre eden paket. Angular uluslararasılaştırması için bağlam sağlayıcıları ve hook'lar sunar.

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

2. 2

   Projenizin Yapılandırılması

   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 yerel ayarlarınız
       ],
       defaultLocale: Locales.ENGLISH,
     },
   };
   
   export default config;

   Bu yapılandırma dosyası aracılığıyla yerelleştirilmiş URL'ler, ara yazılım (middleware) yönlendirmesi, çerez adları, içerik bildirimlerinizin konumu ve uzantısı, konsoldaki Intlayer günlüklerini devre dışı bırakma ve daha fazlasını ayarlayabilirsiniz. Mevcut parametrelerin tam listesi için yapılandırma belgelerine bakın.

3. 3

   Intlayer'ı Angular Yapılandırmanıza Entegre Edin

   Intlayer'ı Angular CLI ile entegre etmek için özel bir oluşturucu (builder) kullanmanız gerekir. Bu kılavuz, Webpack kullandığınızı varsayar (birçok Angular projesi için varsayılandır).

   İlk olarak, angular.json dosyanızı özel Webpack oluşturucusunu 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-webpack:browser", // replace "@angular-devkit/build-angular:application",          "options": {            "customWebpackConfig": {              "path": "./webpack.config.ts",              "mergeStrategies": { "module.rules": "prepend" },            },            "main": "src/main.ts", // replace "browser": "src/main.ts",            // ...          },        },        "serve": {          "builder": "@angular-builders/custom-webpack:dev-server",        },      },    },  },}

   angular.json içinde your-app-name kısmını projenizin gerçek adıyla değiştirdiğinizden emin olun.

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

   webpack.config.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { mergeConfig } from "angular-intlayer/webpack";export default mergeConfig({});

   mergeConfig işlevi Webpack'i Intlayer ile yapılandırır. IntlayerPlugin'i (içerik bildirim dosyalarını işlemek için) enjekte eder ve optimum performans için takma adlar (aliases) ayarlar.

4. 4

   İçeriğinizi Bildirin

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

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

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

5. 5

   Kodunuzda Intlayer'ı Kullanın

   Angular uygulamanız genelinde Intlayer'ın uluslararasılaştırma özelliklerini kullanmak için uygulama yapılandırmanızda Intlayer'ı sağlamanız (provide) 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şen içinde 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, bu nedenle değerlere sinyali çağırarak erişirsiniz: content().title.

6. 6

   İçeriğinizin Dilini Değiştirin

   İsteğe bağlı

   İçeriğinizin dilini değiştirmek için useLocale işlevi tarafından sağlanan 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;}

   Ardından, 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 avantajlarından yararlanmak ve kod tabanınızı daha güçlü hale getirmek için modül genişletme (module augmentation) kullanır.

TypeScript yapılandırmanızın otomatik olarak oluşturulan 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 olarak oluşturulan türleri dahil edin  ],}

Git Yapılandırması

Intlayer tarafından oluşturulan dosyaların yoksayılması önerilir. Bu, onları Git deponuza göndermenizi 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 Uzantısını yükleyebilirsiniz.

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.
• Kolayca çeviri oluşturmak ve güncellemek için hızlı eylemler.

Uzantının nasıl kullanılacağına ilişkin daha fazla ayrıntı için Intlayer VS Code Uzantısı belgelerine bakın.

Daha İleriye Gidin

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