0Pricing
Angular Academy · บทเรียน

การสร้างบันเดิลตามภาษาและภูมิภาค

สร้างแอปพลิเคชันแยกตามภูมิภาคภาษา

การสร้างบันเดิลตามภาษาและภูมิภาค เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

การสร้างหนึ่งชุดต่อภาษา

i18n ของ Angular ทำงานขณะคอมไพล์: สร้างชุดรวมโค้ดที่ปรับให้เหมาะสมอย่างสมบูรณ์แยกกันสำหรับแต่ละภาษา โดยฝังคำแปลไว้ในชุดรวม ผู้ใช้จะดาวน์โหลดเฉพาะภาษาของตนและไม่ต้องเสียต้นทุนการแปลขณะรัน

การกำหนดค่าการสร้างแอปหลายภาษา

เมื่อประกาศภาษาไว้ใน angular.json แล้ว ให้ตั้งค่า localize: true ในตัวเลือกการสร้าง เพื่อสร้างทุกภาษาพร้อมกัน

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

การสร้างแอปสำหรับทุกภาษา

รันการสร้างแอปสำหรับใช้งานจริง แล้ว CLI จะสร้างหนึ่งโฟลเดอร์ต่อภาษา โดยแต่ละโฟลเดอร์มีแอปที่สมบูรณ์

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

การสร้างแอปสำหรับภาษาเดียว

เพื่อให้ทดลองแก้ไขได้เร็วขึ้น คุณสามารถสร้างแอปสำหรับภาษาเดียวโดยส่งรหัสภาษานั้น

ng build --localize=fr

การตั้งค่า base href สำหรับแต่ละภาษา

การสร้างแอปสำหรับแต่ละภาษาสามารถกำหนด baseHref ของตนเองได้ เพื่อให้บริการจากเส้นทางย่อย เช่น /fr/ ให้กำหนดค่านี้ภายใต้แต่ละภาษาใน angular.json

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

การให้บริการภาษาเฉพาะระหว่างพัฒนา

ng serve จะให้บริการทีละภาษา ส่งการตั้งค่าหรือภาษาที่ต้องการเพื่อดูตัวอย่างคำแปลระหว่างการพัฒนา

ng serve --configuration=fr

การนำผู้ใช้ไปยังภาษาของตน

เนื่องจากแต่ละภาษาอยู่ในโฟลเดอร์ที่นำไปติดตั้งได้แยกกัน โดยทั่วไปคุณจะใช้เซิร์ฟเวอร์หรือ CDN เปลี่ยนเส้นทางผู้ใช้ไปยังเส้นทางย่อยที่ถูกต้องตามส่วนหัว Accept-Language หรือเครื่องมือสลับภาษา

$localize ขณะรันสำหรับการตั้งค่าแบบกำหนดเอง

การตั้งค่าขั้นสูงสามารถโหลดคำแปลขณะรันด้วย loadTranslations() จาก @angular/localize ก่อนเริ่มต้นแอป วิธีนี้แลกจากการสร้างแอปแยกต่อภาษาเป็นชุดรวมเดียวพร้อมแผนที่คำแปลที่ดึงมา

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

ข้อกำหนดของโพลีฟิลล์

การใช้ $localize จำเป็นต้องมีโพลีฟิลล์ @angular/localize โปรดเพิ่มโพลีฟิลล์นี้เพียงครั้งเดียวด้วย CLI เพื่อให้ลงทะเบียนตัวแปรส่วนกลางที่จำเป็นสำหรับการแปลเทมเพลตแบบแท็ก

ng add @angular/localize

ขนาดบันเดิลยังคงเล็ก

เนื่องจากการแปลเกิดขึ้นในเวลาบิลด์ บันเดิลภาษาฝรั่งเศสจึงมีเฉพาะข้อความภาษาฝรั่งเศส ไม่มีภาษาอื่น และไม่มีการส่งกลไกการแปลไปยังเบราว์เซอร์ นี่คือเหตุผลที่ i18n ในเวลาคอมไพล์ช่วยให้แอปมีขนาดกระชับ

การนำเอาต์พุตไปใช้งาน

โปรดนำไดเรกทอรี dist/app ทั้งหมดไปใช้งาน โดยโฟลเดอร์ย่อยของแต่ละภาษาจะเป็นแอปที่ทำงานได้อย่างอิสระ โปรดกำหนดค่าโฮสต์ให้ /fr/ ให้บริการบิลด์ภาษาฝรั่งเศส และให้ภาษาเริ่มต้นให้บริการที่รากของเส้นทางหรือเส้นทางของภาษานั้นเอง

ตรวจสอบความเข้าใจ

Angular ส่งการแปลไปพร้อมกับแอปอย่างไร

สรุป

ตั้งค่า localize: true และเรียกใช้ ng build --localize เพื่อสร้างโฟลเดอร์หนึ่งโฟลเดอร์ต่อหนึ่งภาษา โดยแต่ละโฟลเดอร์เป็นแอปที่สมบูรณ์ ใช้ baseHref แยกตามภาษา (เช่น /fr/) ให้บริการภาษาเดียวในระหว่างการพัฒนาด้วย --configuration เพิ่มโพลีฟิลล์ @angular/localize และหากต้องการ สามารถโหลดการแปลขณะทำงานสำหรับการตั้งค่าแบบกำหนดเองได้

คำถามที่พบบ่อย

บทเรียน “การสร้างบันเดิลตามภาษาและภูมิภาค” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การสร้างบันเดิลตามภาษาและภูมิภาค” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การสร้างบันเดิลตามภาษาและภูมิภาค”

สร้างแอปพลิเคชันแยกตามภูมิภาคภาษา คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การสร้างบันเดิลตามภาษาและภูมิภาค” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม

ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การทำเครื่องหมายข้อความเพื่อแปล
  2. การดึงและแปลข้อความ
  3. พหูพจน์และ Select (ICU)
  4. การสร้างบันเดิลตามภาษาและภูมิภาค
← กลับไปที่ Angular Academy