Angular Academy · บทเรียน

การโหลดโมดูลรีโมต

โหลดไมโครฟรอนต์เอนด์รีโมตแบบไดนามิก

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

การดึงรีโมตเข้ามาขณะทำงาน

เมื่อรีโมตเปิดเผยโมดูลและโฮสต์ทราบ URL แล้ว โฮสต์จะโหลดโมดูลนั้นตามต้องการด้วย loadRemoteModule นี่คือการนำเข้าแบบไดนามิกผ่าน HTTP โดยไม่มีส่วนใดของรีโมตถูกรวมอยู่ในบิลด์ของโฮสต์

API ของ loadRemoteModule

loadRemoteModule รับชื่อรีโมต (จากแมป) และคีย์ที่เปิดเผย (จาก exposes ของรีโมต) จากนั้นส่งคืนพรอมิสของโมดูลนั้น

import { loadRemoteModule } from '@angular-architects/native-federation';

const m = await loadRemoteModule('catalog', './Routes');

การโหลดเส้นทางรีโมตแบบชะลอ

รูปแบบที่สะอาดที่สุดคือให้รีโมตแต่ละตัวเปิดเผยไฟล์เส้นทาง แล้วโหลดแบบชะลอในเราเตอร์ของโฮสต์ด้วย loadChildren เพื่อให้โหลดรีโมตเมื่อผู้ใช้เข้าชมเส้นทางนั้นเท่านั้น

export const routes: Routes = [
  {
    path: 'catalog',
    loadChildren: () =>
      loadRemoteModule('catalog', './Routes').then(m => m.CATALOG_ROUTES),
  },
];

การโหลดคอมโพเนนต์เดียว

คุณยังสามารถเปิดเผยและโหลดคอมโพเนนต์แบบสแตนด์อโลนทีละรายการได้ ซึ่งเหมาะสำหรับการฝังวิดเจ็ตแทนการฝังพื้นที่เส้นทางทั้งหมด

{
  path: 'widget',
  loadComponent: () =>
    loadRemoteModule('dashboard', './Widget').then(m => m.WidgetComponent),
}

การเปิดเผยจากฝั่งรีโมต

เพื่อให้โฮสต์โหลดได้ รีโมตต้องแสดงรายการสิ่งที่ส่งออกในแมป exposes คีย์นี้คือค่าที่โฮสต์ส่งให้ loadRemoteModule

// remote federation.config.js
exposes: {
  './Routes': './src/app/catalog.routes.ts',
  './Widget': './src/app/widget.component.ts',
}

การแก้ไขแมปแบบไดนามิก

เนื่องจากโฮสต์อ่านแมปเมื่อเริ่มต้นระบบ คุณจึงสามารถสลับ URL ของรีโมตตามสภาพแวดล้อม (พัฒนา, ทดสอบ, ใช้งานจริง) ได้โดยไม่ต้องบิลด์โฮสต์ใหม่ เพียงส่งไฟล์แมปคนละไฟล์

การจัดการความล้มเหลวในการโหลด

รีโมตถูกโหลดผ่านเครือข่ายและอาจล้มเหลวได้ (ออฟไลน์หรืออยู่ระหว่างการนำไปใช้งาน) โปรดครอบการโหลดด้วยการจัดการข้อผิดพลาด เพื่อไม่ให้รีโมตที่เสียเพียงตัวเดียวทำให้เชลล์ทั้งหมดหยุดทำงาน

loadRemoteModule('catalog', './Routes')
  .then(m => m.CATALOG_ROUTES)
  .catch(() => import('./fallback.routes').then(m => m.FALLBACK_ROUTES));

การส่งข้อมูลข้ามขอบเขต

การสื่อสารระหว่างโฮสต์กับรีโมตใช้บริการซิงเกิลตันที่แบ่งปันร่วมกันหรือเราเตอร์ ไม่ใช่การนำเข้าโดยตรง บริการการยืนยันตัวตนร่วม (ซิงเกิลตัน) ช่วยให้รีโมตอ่านผู้ใช้ปัจจุบันที่โฮสต์กำหนดไว้ได้

การกำหนดเวอร์ชันและสัญญา

คีย์ที่เปิดเผย (เช่น ./Routes) และโครงสร้างของคีย์รวมกันเป็นสัญญา การเปลี่ยนโครงสร้างของสิ่งที่ส่งออกอาจทำให้โฮสต์ที่โหลดสิ่งนั้นเสียหาย ดังนั้นควรถือว่าโมดูลที่เปิดเผยเป็น API สาธารณะและกำหนดเวอร์ชันอย่างรอบคอบ

กลยุทธ์การโหลดล่วงหน้า

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

ลำดับการทำงานตั้งแต่ต้นจนจบ

สรุปเส้นทางขณะทำงาน: โฮสต์อ่านแมนิเฟสต์ ผู้ใช้นำทางไปยังเส้นทางแบบเฟเดอเรชัน loadRemoteModule ดึงข้อมูลของรีโมตจาก remoteEntry.json นำซิงเกิลตันที่ใช้ร่วมกันกลับมาใช้ซ้ำ และเส้นทางหรือคอมโพเนนต์ของรีโมตจะแสดงผลภายในเชลล์ของโฮสต์

ตรวจสอบความเข้าใจอย่างรวดเร็ว

โฮสต์โหลดฟีเจอร์รีโมตแบบขี้เกียจได้อย่างไร

สรุปทบทวน

โฮสต์โหลดรีโมตขณะทำงานด้วย loadRemoteModule(name, key) โดยมักใช้ภายใน loadChildren/loadComponent สำหรับเส้นทางแบบขี้เกียจ รีโมตต้อง expose คีย์ดังกล่าว และแม니เฟสต์จะจับคู่ URL ตามสภาพแวดล้อม จัดการข้อผิดพลาดในการโหลดอย่างเหมาะสม สื่อสารผ่านซิงเกิลตันที่ใช้ร่วมกัน และถือว่าโมดูลที่เปิดเผยเป็นสัญญาที่มีการกำกับรุ่น

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

บทเรียน “การโหลดโมดูลรีโมต” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การโหลดโมดูลรีโมต” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

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

← กลับไปที่ Angular Academy