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:

Panduan Langkah demi Langkah untuk Menyiapkan Intlayer dalam Aplikasi Angular

Lihat Templat Aplikasi di GitHub.

1. 1

   Instal Dependensi

   Instal paket-paket yang diperlukan menggunakan npm:

   bash

   Salin konten

   Salin kode

   Salin kode ke clipboard

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

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

   Konfigurasi proyek Anda

   Buat file konfigurasi untuk mengonfigurasi bahasa aplikasi Anda:

   intlayer.config.ts

   Salin konten

   Salin kode

   Salin kode ke clipboard

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

   Salin konten

   Salin kode

   Salin kode ke clipboard

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

   Salin konten

   Salin kode

   Salin kode ke clipboard

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

   Salin konten

   Salin kode

   Salin kode ke clipboard

   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

   Salin konten

   Salin kode

   Salin kode ke clipboard

   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

   Salin konten

   Salin kode

   Salin kode ke clipboard

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

   Salin konten

   Salin kode

   Salin kode ke clipboard

   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

   Salin konten

   Salin kode

   Salin kode ke clipboard

   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.

Pastikan konfigurasi TypeScript Anda menyertakan tipe yang dihasilkan secara otomatis.

{  // ... 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:

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