angular - แชร์โมดูลภายนอกระหว่างโมดูลที่โหลดแบบขี้เกียจใน angular2

แอปของฉันมีคอมโพเนนต์ที่ใช้แพ็กเกจภายนอกขนาดใหญ่ (ag-grid, ประมาณ 1MB) ซึ่งถูกจัดเตรียมมาเป็นโมดูลของ Angular2 (AgGridModule) ฉันต้องการโหลดแพ็กเกจนี้เฉพาะเมื่อคอมโพเนนต์ที่ใช้งานมันถูกเรียกใช้ ดังนั้น ContentModule และซับโมดูลทั้งหมดของมันจะถูกโหลดแบบ lazy-loaded โครงสร้างทั้งหมดมีลักษณะดังนี้:

อย่างไรก็ตาม เมื่อฉันนำเข้า AgGridModule ทั้งใน Submodule1 และ Submodule3 มันจึงถูกรวมอยู่ในไฟล์ JS ที่คอมไพล์แล้วสองครั้ง ทำให้ทั้ง 1.chunk.js และ 3.chunk.js มีขนาดใหญ่ ฉันได้ลองนำเข้ามันใน ContentModule แต่กระนั้น submodules ก็ไม่รู้จักคอมโพเนนต์ที่รวมอยู่ใน AgGridModule แม้ว่าฉันจะระบุพวกมันในพร็อพเพอร์ตี้ exports ของ ContentModule ก็ตาม

@NgModule({
  imports: [
    ContentRoutingModule,
    SomeOtherModule,
    AgGridModule.withComponents([])
  ],
  exports: [
    // this is the component from AgGridModule that I use
    AgGridNg2
  ]
})
export class ContentModule { }

มีวิธีใดบ้างในการแชร์โมดูลระหว่างโมดูลที่โหลดแบบขี้เกียจ หรือเพื่อเปิดเผยบางส่วนของโมดูลที่นำเข้ากับลูกที่โหลดแบบขี้เกียจ?

อัปเดต: การสร้างโมดูลแชร์และนำเข้าไปในซับโมดูลไม่ช่วยอะไร ยังคงมีสองชิ้นส่วนประมาณ 1MB แต่ละชิ้น:

UPD2: ฉันแก้ปัญหาได้ชั่วคราวโดยการรวม Submodule1 และ Submodule3 เป็นโมดูลเดียว

คำตอบ #1

คุณจำเป็นต้องสร้าง SharedAgGridModule:

@NgModule({
  imports: [
    AgGridModule.withComponents([])
  ],
  exports: [
    ContentModule,
    AgGridModule
  ]
})
export class SharedAgGridModule{}

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

คำตอบ #2

คุณสามารถใช้ SharedModule ที่คุณ import รวมถึง export AgGridModule คุณต้อง export โมดูลทั้งหมด AgGridModule ไม่ใช่แค่คอมโพเนนต์ที่คุณใช้

จากนั้นคุณก็สามารถ import SharedModule ใน Submodule1 และ Submodule3 ได้อย่างง่ายดาย