intlayer_with_angular_21.md

createdAt

2025-04-18

updatedAt

2026-05-31

title

Angular 21 i18n - Panduan lengkap menerjemahkan aplikasi Anda

description

Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi Angular 21 multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa.

keywords

Internasionalisasi

Dokumentasi

Intlayer

Angular

JavaScript

slugs

doc

environment

angular

applicationTemplate

https://github.com/aymericzip/intlayer-angular-21-template

applicationShowcase

https://intlayer-angular-21-template.vercel.app/

history

version	date	changes
8.9.0	2026-05-04	Perbarui penggunaan API Solid useIntlayer untuk akses properti langsung

version	date	changes
8.0.0	2026-01-26	Rilis versi stabil

version	date	changes
8.0.0	2025-12-30	Tambahkan perintah init

version	date	changes
5.5.10	2025-06-29	Riwayat awal

Terjemahkan situs web Angular 21 (Vite) 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 skill, 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 Mengatur Intlayer di Aplikasi Angular

Lihat Templat Aplikasi di GitHub.

Instal paket yang diperlukan menggunakan npm:

npm install intlayer angular-intlayer
npm install @angular-builders/custom-esbuild --save-dev
npx intlayer init

pnpm add intlayer angular-intlayer
pnpm add @angular-builders/custom-esbuild --save-dev
pnpm intlayer init

yarn add intlayer angular-intlayer
yarn add @angular-builders/custom-esbuild --save-dev
yarn intlayer init

bun add intlayer angular-intlayer
bun add @angular-builders/custom-esbuild --dev
bun x intlayer init

intlayer

Paket inti yang menyediakan alat internasionalisasi untuk manajemen konfigurasi, terjemahan, deklarasi konten, kompilasi silang, dan perintah CLI.
angular-intlayer Paket yang mengintegrasikan Intlayer dengan aplikasi Angular. Ini menyediakan context providers dan hooks untuk internasionalisasi Angular.
@angular-builders/custom-esbuild Diperlukan untuk menyesuaikan konfigurasi esbuild dari Angular CLI.

Buat file konfigurasi untuk mengonfigurasi bahasa aplikasi Anda:

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

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      // Bahasa lainnya milik Anda
    ],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

Melalui file konfigurasi ini, Anda dapat mengatur URL yang dilokalkan, pengalihan middleware, nama cookie, lokasi dan ekstensi deklarasi konten Anda, menonaktifkan log Intlayer di konsol, dan banyak lagi. Untuk daftar lengkap parameter yang tersedia, rujuk ke dokumentasi konfigurasi.

Untuk mengintegrasikan Intlayer dengan Angular CLI, Anda perlu menggunakan pembuat (builder) kustom. Panduan ini mengasumsikan Anda menggunakan Vite/esbuild (default untuk proyek Angular 21).

Pertama, modifikasi angular.json Anda untuk menggunakan pembuat esbuild kustom. Perbarui konfigurasi build dan serve:

{
  "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"
              ]
          },
        },
      },
    },
  },
}

Pastikan untuk mengganti your-app-name dengan nama aktual proyek Anda di angular.json.

Selanjutnya, buat file esbuild.plugins.ts di root proyek Anda:

import { intlayerEsbuildPlugin } from "angular-intlayer/esbuild";

export default [intlayerEsbuildPlugin()];

Fungsi intlayerEsbuildPlugin mengonfigurasi esbuild dengan Intlayer. Ini memasukkan plugin untuk menangani file deklarasi konten dan mengatur konfigurasi untuk kinerja optimal.

Pengguna NX: Pembangun Angular NX memuat file plugin melalui resolusi ESM asli Node dan tidak mengkompilasi file plugin TypeScript secara langsung. Gunakan file .mjs sebagai gantinya dan perbarui referensi plugins di angular.json yang sesuai:
import { intlayerEsbuildPlugin } from "angular-intlayer/esbuild";

export default [intlayerEsbuildPlugin()];
Kemudian di angular.json arahkan ke "./esbuild.plugins.mjs" alih-alih "./esbuild.plugins.ts".

Buat dan kelola deklarasi konten Anda untuk menyimpan terjemahan:

import { t, type Dictionary } from "intlayer";

const appContent = {
  key: "app",
  content: {
    title: t({
      en: "Hello",
      fr: "Bonjour",
      es: "Hola",
    }),
    congratulations: t({
      en: "Congratulations! Your app is running. 🎉",
      fr: "Félicitations! Votre application est en cours d'exécution. 🎉",
      es: "¡Felicidades! Tu aplicación está en ejecución. 🎉",
    }),
    exploreDocs: t({
      en: "Explore the Docs",
      fr: "Explorer les Docs",
      es: "Explorar los Docs",
    }),
    learnWithTutorials: t({
      en: "Learn with Tutorials",
      fr: "Apprendre avec les Tutoriels",
      es: "Aprender con los Tutorios",
    }),
    cliDocs: "CLI Docs",
    angularLanguageService: t({
      en: "Angular Language Service",
      fr: "Service de Langage Angular",
      es: "Servicio de Lenguaje Angular",
    }),
    angularDevTools: "Angular DevTools",
    github: "Github",
    twitter: "Twitter",
    youtube: "Youtube",
  },
} satisfies Dictionary;

export default appContent;

Deklarasi konten Anda dapat ditentukan di mana saja di aplikasi Anda selama mereka 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, rujuk ke dokumentasi deklarasi konten.

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

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 dalam komponen mana pun.

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 template Anda:

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

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

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 sesuai dengan hal itu.

Buat komponen untuk beralih antara bahasa:

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:

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 Augmentasi Modul (Module Augmentation) untuk mendapatkan manfaat dari TypeScript dan membuat basis kode Anda lebih kuat.

Pastikan konfigurasi TypeScript Anda menyertakan tipe yang dibuat secara otomatis.

{
  // ... Konfigurasi TypeScript Anda yang sudah ada
  "include": [
    // ... Konfigurasi TypeScript Anda yang sudah ada
    ".intlayer/**/*.ts", // Menyertakan tipe yang dibuat secara otomatis
  ],
}

Konfigurasi Git

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

Untuk melakukannya, Anda dapat menambahkan instruksi berikut ke file .gitignore Anda:

# Mengabaikan file yang dihasilkan oleh Intlayer
.intlayer

Ekstensi VS Code

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

Instal dari VS Code Marketplace

Ekstensi ini menyediakan:

Autocompletion untuk kunci terjemahan.
Deteksi kesalahan secara real-time untuk terjemahan yang hilang.
Pratinjau sebaris untuk konten yang diterjemahkan.
Tindakan cepat untuk membuat dan memperbarui terjemahan dengan mudah.

Untuk detail lebih lanjut tentang cara menggunakan ekstensi ini, rujuk ke dokumentasi Ekstensi VS Code Intlayer.

Melangkah Lebih Jauh

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Terjemahkan situs web Angular 21 (Vite) Anda menggunakan Intlayer | Internasionalisasi (i18n)

Daftar Isi

Mengapa Intlayer dibandingkan alternatif?

Panduan Langkah demi Langkah untuk Mengatur Intlayer di Aplikasi Angular

Konfigurasi TypeScript

Konfigurasi Git

Ekstensi VS Code

Melangkah Lebih Jauh

Uh oh!

FilesExpand file tree

intlayer_with_angular_21.md

Latest commit

History

intlayer_with_angular_21.md

File metadata and controls

Terjemahkan situs web Angular 21 (Vite) Anda menggunakan Intlayer | Internasionalisasi (i18n)

Daftar Isi

Mengapa Intlayer dibandingkan alternatif?

Panduan Langkah demi Langkah untuk Mengatur Intlayer di Aplikasi Angular

Konfigurasi TypeScript

Konfigurasi Git

Ekstensi VS Code

Melangkah Lebih Jauh