Angular Academy · Pelajaran

Membangun Bundel Terlokalisasi

Hasilkan build aplikasi untuk setiap lokal.

Membangun Bundel Terlokalisasi adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Satu Build untuk Setiap Lokal

i18n Angular bekerja saat kompilasi: sistem ini menghasilkan bundel yang sepenuhnya teroptimasi dan terpisah untuk setiap lokal, dengan terjemahan yang sudah disertakan. Pengguna hanya mengunduh bahasa mereka, tanpa biaya penerjemahan saat runtime.

Mengonfigurasi Build yang Dilokalkan

Setelah lokal dideklarasikan dalam angular.json, tetapkan localize: true pada opsi build untuk membuat semua lokal sekaligus.

"build": {
  "options": {
    "localize": true,
    "outputPath": "dist/app"
  }
}

Membangun Semua Lokal

Jalankan build produksi; CLI menghasilkan satu folder untuk setiap lokal, yang masing-masing berisi aplikasi lengkap.

ng build --localize
# dist/app/en/  dist/app/fr/  dist/app/es/

Membangun Satu Lokal

Untuk iterasi yang lebih cepat, Anda dapat membangun hanya satu lokal dengan meneruskan kodenya.

ng build --localize=fr

Menetapkan Base href untuk Setiap Lokal

Setiap build lokal dapat memiliki baseHref sendiri agar disajikan dari subjalur seperti /fr/. Konfigurasikan pengaturan tersebut di bawah setiap lokal dalam angular.json.

"locales": {
  "fr": {
    "translation": "src/locale/messages.fr.xlf",
    "baseHref": "/fr/"
  }
}

Menyajikan Lokal Tertentu dalam Pengembangan

ng serve menyajikan satu lokal pada satu waktu. Teruskan konfigurasi atau lokal yang ingin Anda gunakan untuk melihat pratinjau terjemahan selama pengembangan.

ng serve --configuration=fr

Mengarahkan Pengguna ke Lokal Mereka

Karena setiap lokal merupakan folder terpisah yang dapat diterapkan, Anda biasanya menggunakan server atau CDN untuk mengarahkan pengguna ke subjalur yang tepat berdasarkan header Accept-Language atau pengalih bahasa.

$localize Runtime untuk Penyiapan Kustom

Penyiapan lanjutan dapat memuat terjemahan saat runtime dengan loadTranslations() dari @angular/localize sebelum bootstrap. Cara ini menggantikan build per lokal dengan satu bundel dan peta terjemahan yang diambil secara terpisah.

import { loadTranslations } from '@angular/localize';
loadTranslations(frTranslations);
// then bootstrapApplication(App)

Persyaratan Polyfill

Penggunaan $localize memerlukan polyfill @angular/localize. Tambahkan sekali menggunakan CLI; polyfill ini mendaftarkan global yang diperlukan untuk menerjemahkan templat bertag.

ng add @angular/localize

Ukuran Bundel Tetap Kecil

Karena penerjemahan berlangsung saat build, bundel bahasa Prancis hanya berisi teks bahasa Prancis, tanpa bahasa lain dan tanpa mesin penerjemahan yang dikirim ke peramban. Inilah alasan i18n saat kompilasi membuat aplikasi tetap ringan.

Menerapkan Hasil Build

Terapkan seluruh direktori dist/app; setiap subfolder lokal adalah aplikasi mandiri. Konfigurasikan host agar /fr/ menyajikan build bahasa Prancis dan lokal default disajikan di root atau jalurnya sendiri.

Pemeriksaan Singkat

Bagaimana Angular mengirimkan terjemahan?

Ringkasan

Atur localize: true dan jalankan ng build --localize untuk menghasilkan satu folder per lokal, yang masing-masing merupakan aplikasi lengkap. Gunakan baseHref per lokal (misalnya /fr/), sajikan satu lokal saat pengembangan dengan --configuration, tambahkan polyfill @angular/localize, dan bila diperlukan muat terjemahan saat runtime untuk penyiapan khusus.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membangun Bundel Terlokalisasi” gratis?

Ya — teks lengkap “Membangun Bundel Terlokalisasi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Membangun Bundel Terlokalisasi”?

Hasilkan build aplikasi untuk setiap lokal. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Membangun Bundel Terlokalisasi” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy