เนทีฟเฟเดอเรชันสำหรับ Angular
กำหนดค่าโมดูลเฟเดอเรชันใน Angular
เนทีฟเฟเดอเรชันสำหรับ Angular เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุผลที่เลือก Native Federation
Module Federation แบบดั้งเดิมผูกติดกับ webpack ระบบบิลด์ของ Angular เปลี่ยนมาใช้ esbuild ชุมชนจึงสร้าง Native Federation ซึ่งเป็นการนำแนวคิดเดียวกันมาใช้โดยไม่ผูกกับเครื่องมือบิลด์ใดเครื่องมือหนึ่ง และสร้างขึ้นบนมาตรฐานเว็บ (แผนที่การนำเข้าและโมดูล ES)
แพ็กเกจ
Native Federation สำหรับ Angular อยู่ใน @angular-architects/native-federation คุณเพิ่มแพ็กเกจนี้ด้วยสคีมาติกของ Angular CLI ซึ่งจะเชื่อมต่อการกำหนดค่าและกระบวนการบิลด์ให้
ng add @angular-architects/native-federationการเริ่มต้นโฮสต์
เรียกใช้สคีมาติกกับแอปเชลล์และเลือก dynamic-host ระบบจะสร้าง federation.config.js และอัปเดตการเริ่มต้นระบบเพื่อเริ่มต้น federation ก่อนที่ Angular จะเริ่มทำงาน
ng g @angular-architects/native-federation:init --project shell --type dynamic-hostการเริ่มต้นรีโมต
สำหรับแอปฟีเจอร์ ให้เรียกใช้การเริ่มต้นแบบเดียวกันกับ remote ระบบจะสร้างการกำหนดค่าที่เปิดเผยส่วนต่าง ๆ ของรีโมตให้โฮสต์ใช้งาน
ng g @angular-architects/native-federation:init --project catalog --type remote --port 4201federation.config.js
การกำหนดค่านี้เป็นหัวใจของ federation โดยระบุชื่อรีโมต แสดงรายการสิ่งที่รีโมต exposes และประกาศการพึ่งพาที่ shared
// catalog/federation.config.js
module.exports = withNativeFederation({
name: 'catalog',
exposes: { './Routes': './src/app/catalog.routes.ts' },
shared: { ...shareAll({ singleton: true }) },
});การเปลี่ยนแปลงการเริ่มต้นระบบ
Native Federation ต้องเริ่มต้นก่อนการเริ่มต้นระบบ เพื่อให้แผนที่การนำเข้าพร้อมใช้งาน สคีมาติกจะแยก main.ts ออกเป็นขั้นตอนการเริ่มต้นที่โหลด bootstrap.ts
// main.ts
import { initFederation } from '@angular-architects/native-federation';
initFederation()
.then(() => import('./bootstrap'))
.catch(err => console.error(err));การแสดงรายการรีโมตในโฮสต์
โฮสต์จะเก็บแมปที่เชื่อมโยงชื่อรีโมตกับ URL ของ remoteEntry.json เพื่อให้ทราบว่าจะดึงรีโมตแต่ละตัวจากที่ใดขณะทำงาน
// federation.manifest.json
{
"catalog": "http://localhost:4201/remoteEntry.json"
}การโหลดแมป
ส่งเส้นทางของแมปให้กับ initFederation โฮสต์จะอ่านแมปนี้หนึ่งครั้งเมื่อเริ่มต้นระบบ จากนั้นจึงโหลดรีโมตที่แสดงรายการไว้ตามต้องการได้
initFederation('/assets/federation.manifest.json')
.then(() => import('./bootstrap'));อิงตามมาตรฐาน ไม่ผูกติดกับ webpack
เนื่องจาก Native Federation ใช้โมดูล ES แบบเนทีฟและแผนที่การนำเข้า จึงทำงานร่วมกับ esbuild, Vite หรือโปรแกรมรวมบันเดิลอื่น ๆ ได้ การแยกการพึ่งพานี้คือเหตุผลที่ Native Federation กลายเป็นแนวทางที่แนะนำสำหรับ Angular รุ่นใหม่
เซิร์ฟเวอร์พัฒนาสำหรับแต่ละรีโมต
ระหว่างการพัฒนา รีโมตแต่ละตัวจะทำงานบนพอร์ตของตนเอง (ng serve --port 4201) โฮสต์จะชี้ไปยัง URL เหล่านั้นผ่านแมป คุณจึงสามารถเรียกใช้การประกอบทั้งหมดภายในเครื่องได้
สิ่งที่ Native Federation มอบให้
สรุปคือ การบิลด์ที่เป็นอิสระ ซิงเกิลตันที่ใช้ร่วมกัน (อินสแตนซ์ Angular เดียว) การโหลดรีโมตแบบไดนามิก และการไม่ผูกติดกับโปรแกรมรวมบันเดิลเฉพาะตัว บทเรียนถัดไปจะอธิบายการแบ่งปันการพึ่งพาและการโหลดโมดูลรีโมตโดยละเอียด
ตรวจสอบความเข้าใจ
เหตุใดจึงเลือก Native Federation แทน Module Federation แบบดั้งเดิมใน Angular
สรุป
Native Federation (@angular-architects/native-federation) นำ module federation มาสู่ Angular ที่ใช้ esbuild โดยอาศัยแผนที่การนำเข้า เริ่มต้นโฮสต์และรีโมตด้วยสคีมาติก กำหนดค่า exposes และ shared ใน federation.config.js เรียกใช้ initFederation ก่อนการเริ่มต้นระบบ และแสดงรายการรีโมตในแมป
คำถามที่พบบ่อย
บทเรียน “เนทีฟเฟเดอเรชันสำหรับ Angular” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “เนทีฟเฟเดอเรชันสำหรับ Angular” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “เนทีฟเฟเดอเรชันสำหรับ Angular”
กำหนดค่าโมดูลเฟเดอเรชันใน Angular คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “เนทีฟเฟเดอเรชันสำหรับ Angular” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- สถาปัตยกรรมไมโครฟรอนต์เอนด์
- เนทีฟเฟเดอเรชันสำหรับ Angular
- การแชร์สิ่งที่ต้องพึ่งพา
- การโหลดโมดูลรีโมต