Angular Academy · บทเรียน

การแชร์สิ่งที่ต้องพึ่งพา

แชร์ Angular และไลบรารีระหว่างรีโมต

บทเรียน 3 จาก 413 ขั้นตอน

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

เหตุผลที่ต้องแบ่งปันการพึ่งพา

หากโฮสต์และรีโมตสามตัวต่างบันเดิล Angular ของตนเอง เบราว์เซอร์จะดาวน์โหลด Angular สี่ครั้ง และที่แย่กว่านั้นคือจะมีอินสแตนซ์ Angular หลายชุด ซึ่งทำให้การฉีดการพึ่งพาเสียหาย การ แบ่งปัน ช่วยให้โหลดสำเนาเดียวเพียงครั้งเดียวและนำกลับมาใช้โดยทุกส่วน

ส่วน shared

ใน federation.config.js ออบเจ็กต์ shared จะประกาศว่าการพึ่งพาใดบ้างที่โฮสต์และรีโมตใช้ร่วมกัน Native Federation จะกำจัดรายการซ้ำขณะทำงาน

module.exports = withNativeFederation({
  shared: {
    ...shareAll({ singleton: true, strictVersion: true }),
  },
});

ตัวช่วย shareAll

shareAll() จะแบ่งปันการพึ่งพาทุกตัวใน package.json ด้วยการกำหนดค่าเดียว ซึ่งเป็นจุดเริ่มต้นที่ใช้กันทั่วไป จากนั้นคุณสามารถเขียนทับแพ็กเกจบางรายการได้

shared: {
  ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
}

singleton: เหตุผลที่สำคัญสำหรับ Angular

singleton: true บังคับให้มีอินสแตนซ์ของแพ็กเกจเพียงหนึ่งชุดทั่วทั้งแอป Angular core, RxJS และเราเตอร์ MUST เป็นซิงเกิลตัน การมี @angular/core สองชุดหมายถึงมีแผนผังตัวฉีดสองชุดและเกิดข้อผิดพลาดขณะทำงาน

การเจรจาเวอร์ชัน

เมื่อรีโมตร้องขอเวอร์ชันที่แตกต่างกัน federation จะเลือกเวอร์ชันที่เข้ากันได้ strictVersion: true จะทำให้เกิดข้อผิดพลาดเมื่อเข้ากันไม่ได้ แทนที่จะโหลดเวอร์ชันที่ไม่ตรงกันอย่างเงียบ ๆ จึงช่วยเปิดเผยปัญหาได้ตั้งแต่เนิ่น ๆ

shared: {
  '@angular/core': { singleton: true, strictVersion: true, requiredVersion: '^18.0.0' },
}

การแบ่งปันไลบรารีของคุณเอง

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

shared: {
  '@myorg/design-system': { singleton: true, requiredVersion: 'auto' },
  '@myorg/auth': { singleton: true },
}

requiredVersion: auto

requiredVersion: 'auto' จะอ่านเวอร์ชันจาก package.json เพื่อให้คุณไม่ต้องระบุเวอร์ชันตายตัว การทำเช่นนี้ช่วยให้การกำหนดค่าสอดคล้องกันเมื่อคุณอัปเกรดการพึ่งพา

สิ่งที่เกิดขึ้นขณะทำงาน

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

ต้นทุนของการไม่แบ่งปัน

การลืมแบ่งปัน Angular เป็นข้อผิดพลาดที่พบบ่อยที่สุด แอปอาจดูเหมือนทำงานได้ แต่จากนั้นเกิดข้อผิดพลาดที่เข้าใจยาก เช่น "NG0203: inject() must be called from an injection context" เนื่องจากมี Angular สองชุด การแบ่งปันแบบซิงเกิลตันจะป้องกันปัญหานี้

การรักษาเวอร์ชันให้สอดคล้องกัน

การนำไปใช้งานที่เป็นอิสระอาจทำให้เวอร์ชันแยกห่างจากกัน ทีมต่าง ๆ ควรตกลงช่วงเวอร์ชันร่วมกันสำหรับแพ็กเกจเฟรมเวิร์กและอัปเกรดให้ประสานกัน เพราะโฮสต์ที่ใช้ Angular 18 ไม่สามารถแบ่งปันกับรีโมตที่ต้องใช้ Angular 17 ได้อย่างปลอดภัย

การไม่แบ่งปันแพ็กเกจบางรายการ

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

shared: {
  ...shareAll({ singleton: true }),
}
// skip a package by removing it from the shared map / excluding it

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

แพ็กเกจใดบ้างที่ต้องเป็นซิงเกิลตัน

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป

ประกาศการพึ่งพาที่ shared (มักทำผ่าน shareAll) เพื่อให้โฮสต์และรีโมตโหลดสำเนาเดียว ทำให้ไลบรารีเฟรมเวิร์กและไลบรารีที่มีสถานะ (@angular/core, เราเตอร์, RxJS, ไลบรารีการยืนยันตัวตนของคุณ) มีค่า singleton: true ใช้ strictVersion และ requiredVersion: 'auto' เพื่อตรวจจับเวอร์ชันที่คลาดเคลื่อน การลืมแบ่งปัน Angular จะทำให้เกิดข้อผิดพลาดของ DI

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 38
บทเรียน: 144

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “การแชร์สิ่งที่ต้องพึ่งพา” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การแชร์สิ่งที่ต้องพึ่งพา”

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

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

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

บทเรียน “การแชร์สิ่งที่ต้องพึ่งพา” ใช้เวลานานแค่ไหน

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

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

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

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

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