Penulis:
    Aymeric PINEAU
    Dibuat:2025-04-18Terakhir diperbarui:2026-05-31

    Terjemahkan situs web Angular 19 (Webpack) Anda menggunakan Intlayer | Internasionalisasi (i18n)

    Daftar Isi

    Mengapa Intlayer dibandingkan alternatif?

    Dibandingkan dengan solusi utama seperti ngx-translate atau angular-l10n, Intlayer adalah solusi yang hadir dengan pengoptimalan terintegrasi seperti:

    Intlayer dioptimalkan agar berfungsi sempurna dengan Angular dengan menawarkan pelingkupan konten tingkat komponen, terjemahan yang lambat dimuat, dan semua fitur yang diperlukan untuk penskalaan internasionalisasi (i18n).

    Daripada memuat file JSON berukuran besar ke halaman Anda, muat saja konten yang diperlukan. Intlayer membantu mengurangi ukuran bundle dan halaman Anda hingga 50%.

    Mencakup konten aplikasi Anda memfasilitasi pemeliharaan untuk aplikasi berskala besar. Anda dapat menduplikasi atau menghapus satu folder fitur tanpa beban mental untuk meninjau seluruh basis kode konten Anda. Selain itu, Intlayer diketik sepenuhnya untuk memastikan keakuratan konten Anda.

    Menempatkan konten bersama mengurangi konteks yang diperlukan dengan Model Bahasa Besar (LLM). Intlayer juga dilengkapi dengan serangkaian alat, seperti CLI untuk menguji terjemahan yang hilang,LSP, MCP, dan agent skills, untuk menjadikan pengalaman pengembang (DX) lebih lancar bagi agen AI.

    Gunakan otomatisasi untuk menerjemahkan dalam saluran CI/CD Anda menggunakan LLM pilihan Anda dengan biaya penyedia AI Anda. Intlayer juga menawarkan compiler untuk mengotomatiskan ekstraksi konten, serta platform web untuk membantu menerjemahkan di latar belakang.

    Menghubungkan file JSON berukuran besar ke komponen dapat menyebabkan masalah kinerja dan reaktivitas. Intlayer mengoptimalkan pemuatan konten Anda pada waktu pembuatan.

    Lebih dari sekedar solusi i18n, Intlayer menyediakan editor visual yang dihosting sendiri dan CMS lengkap untuk membantu Anda mengelola konten multibahasa secara real-time, membuat kolaborasi dengan penerjemah, copywriter, dan anggota tim lainnya menjadi lancar. Konten dapat disimpan secara lokal dan/atau jarak jauh.

    Panduan Langkah demi Langkah untuk Menyiapkan Intlayer dalam Aplikasi Angular

    ide.intlayer.org
    intlayer-angular-19-template.vercel.app

    Lihat Templat Aplikasi di GitHub.

    1. Instal Dependensi

      Instal paket-paket yang diperlukan menggunakan npm:

      bash
      npx intlayer init --interactive
      flag --interactive bersifat opsional. Gunakan intlayer-cli init jika Anda adalah agen AI.
      Perintah ini akan mendeteksi lingkungan Anda dan menginstal paket yang diperlukan. Misalnya:
      bash
      npm install intlayer angular-intlayer
npm install @angular-builders/custom-webpack --save-dev

      • intlayer

        Paket inti yang menyediakan alat internasionalisasi untuk manajemen konfigurasi, terjemahan, deklarasi konten, transpilasi, dan perintah CLI.

      • angular-intlayer Paket yang mengintegrasikan Intlayer dengan aplikasi Angular. Ini menyediakan penyedia konteks dan hook untuk internasionalisasi Angular.

      • @angular-builders/custom-webpack Diperlukan untuk menyesuaikan konfigurasi Webpack dari Angular CLI.

    2. Konfigurasi proyek Anda

      Buat file konfigurasi untuk mengonfigurasi bahasa aplikasi Anda:

      intlayer.config.ts
      import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      // Lokal Anda yang lain
    ],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;
      Melalui file konfigurasi ini, Anda dapat mengatur URL yang dilokalisasi, pengalihan middleware, nama cookie, lokasi dan ekstensi deklarasi konten Anda, menonaktifkan log Intlayer di konsol, dan banyak lagi. Untuk daftar lengkap parameter yang tersedia, lihat dokumentasi konfigurasi.

    3. Integrasikan Intlayer dalam Konfigurasi Angular Anda

      Untuk mengintegrasikan Intlayer dengan Angular CLI, Anda perlu menggunakan builder khusus. Panduan ini mengasumsikan Anda menggunakan Webpack (default untuk banyak proyek Angular).

      Pertama, modifikasi angular.json Anda untuk menggunakan builder Webpack khusus. Perbarui konfigurasi build dan serve:

      angular.json
      {
  "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",
        },
      },
    },
  },
}
      Pastikan untuk mengganti your-app-name dengan nama proyek Anda yang sebenarnya di angular.json.

      Selanjutnya, buat file webpack.config.ts di akar proyek Anda:

      webpack.config.ts
      import { mergeConfig } from "angular-intlayer/webpack";

export default mergeConfig({});
      Fungsi mergeConfig mengonfigurasi Webpack dengan Intlayer. Ini menyuntikkan IntlayerPlugin (untuk menangani file deklarasi konten) dan mengatur alias untuk performa optimal.

    4. Deklarasikan Konten Anda

      Buat dan kelola deklarasi konten Anda untuk menyimpan terjemahan:

      Deklarasi konten Anda dapat didefinisikan di mana saja dalam aplikasi Anda asalkan disertakan dalam direktori contentDir (secara default, ./src). Dan cocok dengan ekstensi file deklarasi konten (secara default, .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).
      Untuk detail lebih lanjut, lihat dokumentasi deklarasi konten.

    5. Gunakan Intlayer dalam Kode Anda

      Untuk menggunakan fitur internasionalisasi Intlayer di seluruh aplikasi Angular Anda, Anda perlu menyediakan Intlayer dalam konfigurasi aplikasi Anda.

      src/app/app.config.ts
      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(), // Tambahkan penyedia Intlayer di sini
  ],
};

      Kemudian, Anda dapat menggunakan fungsi useIntlayer di dalam komponen apa pun.

      src/app/app.component.ts
      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");
}

      Dan di templat Anda:

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

      Konten Intlayer dikembalikan sebagai Signal, jadi Anda mengakses nilainya dengan memanggil sinyal: content().title.

    6. Ubah bahasa konten Anda

      Opsional

      Untuk mengubah bahasa konten Anda, Anda dapat menggunakan fungsi setLocale yang disediakan oleh fungsi useLocale. Ini memungkinkan Anda untuk mengatur lokal aplikasi dan memperbarui konten yang sesuai.

      Buat komponen untuk beralih antar bahasa:

      src/app/locale-switcher.component.ts
      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;
}

      Kemudian, gunakan komponen ini di app.component.ts Anda:

      src/app/app.component.ts
      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");
}

    Konfigurasi TypeScript

    Intlayer menggunakan module augmentation untuk mendapatkan manfaat TypeScript dan membuat basis kode Anda lebih kuat.

    Autocompletion

    Translation error

    Pastikan konfigurasi TypeScript Anda menyertakan tipe yang dihasilkan secara otomatis.

    tsconfig.json
    {
  // ... Konfigurasi TypeScript Anda yang sudah ada
  "include": [
    // ... Konfigurasi TypeScript Anda yang sudah ada
    ".intlayer/**/*.ts", // Sertakan tipe yang dihasilkan secara otomatis
  ],
}

    Konfigurasi Git

    Disarankan untuk mengabaikan file yang dihasilkan oleh Intlayer. Ini memungkinkan Anda untuk menghindari commit file tersebut ke repositori Git Anda.

    To do this, you can add the following instructions to your .gitignore file:

    bash
    #  Abaikan file yang dihasilkan oleh Intlayer
.intlayer

    Ekstensi VS Code

    Untuk meningkatkan pengalaman pengembangan Anda dengan Intlayer, Anda dapat menginstal Ekstensi VS Code Intlayer resmi.

    Instal dari VS Code Marketplace

    Ekstensi ini menyediakan:

    • Autocompletion untuk kunci terjemahan.
    • Deteksi kesalahan waktu nyata untuk terjemahan yang hilang.
    • Pratinjau sebaris dari konten yang diterjemahkan.
    • Tindakan cepat untuk membuat dan memperbarui terjemahan dengan mudah.

    Untuk detail lebih lanjut tentang cara menggunakan ekstensi, lihat dokumentasi Ekstensi VS Code Intlayer.

    Melangkah Lebih Jauh

    Untuk melangkah lebih jauh, Anda dapat mengimplementasikan visual editor atau mengeksternalisasi konten Anda menggunakan CMS.

    Pertanyaan yang Sering Diajukan

    • Bawaan @angular/localize: solusi resmi Angular yang mengompilasi bundle aplikasi terpisah per bahasa.
    • ngx-translate dan Transloco: pemuatan JSON di runtime via pipe atau direktif.
    • Intlayer: integrasi langsung dengan Angular Signals, kompilasi build time, typing TypeScript lengkap, AI terjemahan, dan visual editor.

    Lihat mengapa Intlayer.

    Jauh lebih sedikit daripada solusi berbasis namespace, karena halaman tidak pernah mengunduh katalog yang tidak di-render. Kompilator build time mengganti panggilan useIntlayer dengan entri kamus persis yang digunakan komponen, dan kamus dinamis membagi sisanya per locale, mengurangi bundle hingga 50%. Lihat optimasi bundle dan benchmark.

    Sebagian besar ya. Ikuti ikhtisar adapter kompatibilitas. Anda juga dapat mempertahankan file JSON dengan plugin sync JSON.

    Ya. Plugin sync JSON menjaga file /messages/{locale}/{namespace}.json Anda sebagai sumber kebenaran dan menghasilkan kamus Intlayer darinya, di kedua arah. Plugin sync PO melakukan hal yang sama untuk katalog gettext, dan file per locale memungkinkan Anda membagi konten berdasarkan bahasa daripada mengelompokkan lokal dalam satu file.

    Tidak. Jalankan npx intlayer extract dan Intlayer membaca file Anda, mengeluarkan string yang dihadapi pengguna, dan menulis file .content di sebelah masing-masing, sehingga Anda meninjau diff alih-alih menyalin string ke dalam katalog satu per satu. Lihat perintah extract.

    Untuk proses otomatis penuh, Intlayer Compiler melakukan hal yang sama saat build time dan menghasilkan kamus pada setiap perubahan.

    Lima bagian, semuanya opsional:

    • Ekstensi VS Code: lompat dari kunci useIntlayer ke file konten yang mendeklarasikannya, ekstrak konten dari komponen, dan jalankan build, fill, test, push dan pull dari command palette atau tab Intlayer.
    • Server LSP: pengalaman yang sama di editor mana pun yang mendukung LSP, dengan go to definition, hover preview dari nilai terjemahan, autocompletion kunci, dan peringatan ketika kunci tidak dideklarasikan. Ini juga menyelesaikan panggilan i18next, react-i18next, next-intl dan use-intl.
    • Server MCP: mengekspos dokumentasi Intlayer dan CLI ke Cursor, VS Code, Claude Desktop, Claude Code dan ChatGPT.
    • Agent skills: keahlian terfokus seperti intlayer-config, intlayer-cli dan intlayer-content.
    • Plugin ESLint: aturan no-raw-text menandai string hardcoded.
    Angular 21Analog