Angular 4: ไม่พบโรงงานส่วนประกอบคุณเพิ่มไปยัง @ NgModule.entryComponents หรือไม่

ฉันใช้เทมเพลต Angular 4 กับ webpack และฉันมีข้อผิดพลาดนี้เมื่อฉันพยายามใช้ส่วนประกอบ (ConfirmComponent):

ไม่พบโรงงานส่วนประกอบสำหรับ ConfirmComponent คุณเพิ่มลงใน @ NgModule.entryComponents หรือไม่

ส่วนประกอบถูกประกาศใน app.module.server.ts

@NgModule({
  bootstrap: [ AppComponent ],
  imports: [
    // ...
  ],
  entryComponents: [
    ConfirmComponent,
  ],
})
export class AppModule { }

ฉันยัง app.module.browser.tsและapp.module.shared.ts

ฉันจะแก้ไขได้อย่างไร

เพิ่มในของคุณmodule.ts,

declarations: [
  AppComponent,
  ConfirmComponent
]

หาก ConfirmComponent อยู่ในโมดูลอื่นคุณจะต้องส่งออกมันที่นั่นเพื่อให้คุณสามารถใช้งานได้นอกเพิ่ม:

exports: [ ConfirmComponent ]

--- อัปเดต Angular 9 หรือ Angular 8 ด้วยการเปิดใช้งาน Ivy อย่างชัดเจน ---

ส่วนประกอบรายการด้วย Ivy ไม่จำเป็นอีกต่อไปและตอนนี้เลิกใช้แล้ว

--- สำหรับ Angular 9 และ 8 ที่ปิดการใช้งาน Ivy ---

ในกรณีของส่วนประกอบที่โหลดแบบไดนามิกและเพื่อให้ ComponentFactory ถูกสร้างขึ้นส่วนประกอบนั้นจะต้องเพิ่มเข้าไปในรายการส่วนประกอบของโมดูลด้วย:

declarations: [
  AppComponent,
  ConfirmComponent
],
entryComponents: [ConfirmComponent],

ตามคำจำกัดความของรายการส่วนประกอบ

ระบุรายการของส่วนประกอบที่ควรจะรวบรวมเมื่อมีการกำหนดโมดูลนี้ สำหรับแต่ละองค์ประกอบที่แสดงไว้ที่นี่ Angular จะสร้าง ComponentFactory และเก็บไว้ใน ComponentFactoryResolver

ดูรายละเอียดเกี่ยวกับentryComponent:

หากคุณกำลังโหลดส่วนประกอบใด ๆ แบบไดนามิกคุณจะต้องใส่มันลงในทั้งสองdeclarationsและentryComponent:

@NgModule({
  imports: [...],
  exports: [...],
  entryComponents: [ConfirmComponent,..],
  declarations: [ConfirmComponent,...],
  providers: [...]
})

TL; DR: บริการใน NG6 กับprovidedIn: "root"ไม่สามารถหา ComponentFactory เมื่อตัวแทนจะไม่เพิ่มในentryComponentsของapp.module

ปัญหานี้อาจเกิดขึ้นได้หากคุณใช้ angular 6 ร่วมกับการสร้าง Component แบบไดนามิกในบริการ!

ตัวอย่างเช่นการสร้างภาพซ้อนทับ:

@Injectable({
  providedIn: "root"
})
export class OverlayService {

  constructor(private _overlay: Overlay) {}

  openOverlay() {
    const overlayRef = this._createOverlay();
    const portal = new ComponentPortal(OverlayExampleComponent);

    overlayRef.attach(portal).instance;
  }
}

ปัญหาคือ

ที่มีให้: "รูท"

นิยามซึ่งให้บริการนี้ในapp.module

ดังนั้นหากบริการของคุณอยู่ใน "OverlayModule" ซึ่งคุณได้ประกาศ OverlayExampleComponent และเพิ่มไปยัง entryComponents บริการจะไม่สามารถค้นหา ComponentFactory สำหรับ OverlayExampleComponent

ฉันมีปัญหาเดียวกัน ในกรณีนี้เป็นสิ่งสำคัญเพราะมันจะไม่ทำงานถ้าคุณทำไม่ได้นำเข้าimports [...]NgbModalModule

คำอธิบายข้อผิดพลาดบอกว่าควรเพิ่มองค์ประกอบในentryComponentsอาร์เรย์และเห็นได้ชัด แต่ให้แน่ใจว่าคุณได้เพิ่มองค์ประกอบนี้ในสถานที่แรก:

imports: [
    ...
    NgbModalModule,
    ...
  ],

เพิ่มองค์ประกอบนั้นในรายการส่วนประกอบใน @NgModule ของโมดูลแอปของคุณ:

entryComponents:[ConfirmComponent],

เช่นเดียวกับการประกาศ:

declarations: [
    AppComponent,
    ConfirmComponent
]

เพิ่ม 'NgbModalModule' ในการนำเข้าและชื่อส่วนประกอบของคุณในรายการส่วนประกอบ App.module.ts ที่แสดงด้านล่าง

วางองค์ประกอบที่สร้างแบบไดนามิกให้กับรายการส่วนประกอบภายใต้ฟังก์ชัน @NgModuledecorator

@NgModule({
    imports: [
        FormsModule,
        CommonModule,
        DashbaordRoutingModule
    ],
    declarations: [
        MainComponent,
        TestDialog
    ],
    entryComponents: [
        TestDialog
    ]
})

ฉันมีปัญหาเดียวกันกับ angular 6 นั่นคือสิ่งที่ทำงานให้ฉัน:

@NgModule({
...
entryComponents: [ConfirmComponent],
providers:[ConfirmService]

})

หากคุณมีบริการเช่นConfirmServiceต้องประกาศในผู้ให้บริการโมดูลปัจจุบันแทนรูท

ฉันมีปัญหาเดียวกันสำหรับ bootstrap modal

นำเข้า {NgbModal} จาก '@ ng-bootstrap / ng-bootstrap';

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

นำเข้า {NgbModule} จาก '@ ng-bootstrap / ng-bootstrap';

imports: [
   NgbModule.forRoot(),
   ...
]

ข้อผิดพลาดนี้เกิดขึ้นเมื่อคุณพยายามโหลดส่วนประกอบแบบไดนามิกและ:

1. คอมโพเนนต์ที่คุณต้องการโหลดไม่ใช่โมดูลการกำหนดเส้นทาง
2. คอมโพเนนต์ไม่อยู่ในรายการโมดูลคอมโพเนนต์

ใน routingModule

const routes: Routes = [{ path: 'confirm-component', component: ConfirmComponent,data: {}}]

หรือในโมดูล

entryComponents: [
ConfirmComponent
} 

ในการแก้ไขข้อผิดพลาดนี้คุณสามารถเพิ่มเราเตอร์ในส่วนประกอบหรือเพิ่มเข้าไปในรายการส่วนประกอบของโมดูล

1. เพิ่มเราเตอร์ใน component.drawback ของวิธีนี้คือส่วนประกอบของคุณจะสามารถเข้าถึงได้ด้วย url นั้น
2. เพิ่มไปยังรายการส่วนประกอบ ในกรณีนี้ส่วนประกอบของคุณจะไม่มี url ใด ๆ ติดอยู่และจะไม่สามารถเข้าถึงได้ด้วย url

ฉันมีปัญหาเดียวกันใน Angular7 เมื่อฉันสร้างส่วนประกอบแบบไดนามิก มีสององค์ประกอบ (TreatListComponent, MyTreatComponent) ที่ต้องโหลดแบบไดนามิก ฉันเพิ่งเพิ่มรายการอาร์เรย์ส่วนประกอบในไฟล์ app.module.ts ของฉัน

    entryComponents: [
    TreatListComponent,
    MyTreatComponent
  ],

หากคุณใช้การกำหนดเส้นทางในแอปพลิเคชันของคุณ

ตรวจสอบให้แน่ใจว่าเพิ่มส่วนประกอบใหม่ในเส้นทางการกำหนดเส้นทาง

ตัวอย่างเช่น :

    const appRoutes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'home', component: HomeComponent },
  { path: 'fundList',      component: FundListComponent },
];

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

imports: [
    NgbModule.forRoot(),
    ...
]

https://medium.com/@sunilk/getting-started-angular-6-and-ng-bootstrap-4-4b314e015c1c

คุณจะต้องเพิ่มมันในรายการส่วนประกอบเท่านั้นหากส่วนประกอบจะรวมอยู่ใน modal จากเอกสาร:

คุณสามารถส่งผ่านองค์ประกอบที่มีอยู่เป็นเนื้อหาของหน้าต่างโมดัล ในกรณีนี้อย่าลืมเพิ่มองค์ประกอบเนื้อหาเป็นส่วนรายการส่วนประกอบของ NgModule ของคุณ

ฉันได้รับปัญหาเดียวกันกับ ag-grid โดยใช้ส่วนประกอบแบบไดนามิก ฉันค้นพบว่าคุณจำเป็นต้องเพิ่มองค์ประกอบแบบไดนามิกในโมดูล ag-grid ด้วยภายในส่วนประกอบ []

การนำเข้า: [StratoMaterialModule, BrowserModule, AppRoutingModule, HttpClientModule, BrowserAnimationsModule, NgbModule.forRoot () FormsModule, ReactiveFormsModule, AppRoutingModule, AgGridModule.withComponents (ProjectUpdateButtonComponent) ]

ในกรณีของฉันฉันลืมที่จะเพิ่มMatDialogModuleการนำเข้าในโมดูลย่อย

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

ในกรณีที่คุณยังคงมีข้อผิดพลาดหลังจากระบุคลาสไดอะล็อกคอมโพเนนต์entryComponentsลองรีสตาร์ทng serve- มันใช้งานได้สำหรับฉัน

ข้อผิดพลาดของฉันเรียกวิธีการเปิด NgbModal ด้วยพารามิเตอร์ที่ไม่ถูกต้องจาก. html

คุณควรนำเข้าNgbModuleในโมดูลดังนี้:

@NgModule({
  declarations: [
    AboutModalComponent
  ],
  imports: [
    CommonModule,
    SharedModule,
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
    NgxLoadingModule,
    NgbDatepickerModule,
    NgbModule
  ],
  entryComponents: [AboutModalComponent]
})
 export class HomeModule {}

1. entryComponentsมีความสำคัญ คำตอบข้างต้นเกี่ยวกับสิ่งนี้ถูกต้อง

แต่...

2. หากคุณกำลังให้บริการที่เปิดกิริยา (รูปแบบทั่วไป) และโมดูลของคุณที่กำหนดองค์ประกอบโต้ตอบไม่ได้โหลดใน AppModule ที่คุณจะต้องมีการเปลี่ยนแปลงไปprovidedIn: 'root' providedIn: MyModuleตามหลักปฏิบัติทั่วไปคุณควรใช้providedIn: SomeModuleบริการไดอะล็อกทั้งหมดที่อยู่ในโมดูล

ฉันกำลังใช้ Angular8 และฉันพยายามเปิดส่วนประกอบในรูปแบบโมดูลอื่นแบบไดนามิกในกรณีนี้คุณต้องimport the moduleเข้าสู่โมดูลที่พยายามเปิดส่วนประกอบแน่นอนนอกเหนือ exportจากส่วนประกอบและรายการลงในentryComponentsอาร์เรย์ เหมือนคำตอบก่อนหน้านี้

imports: [
    ...
    TheModuleThatOwnTheTargetedComponent,
    ...
  ],

ในกรณีของฉันฉันแก้ไขปัญหานี้โดย:
1) การวางNgxMaterialTimepickerModuleในapp module imports:[ ]
2) การวางNgxMaterialTimepickerModuleในtestmodule.ts imports:[ ]
3) การวางtestcomponentในdeclartions:[ ]และentryComponents:[ ]

(ฉันใช้รุ่นเชิงมุม 8+)

ประกาศหน้าใหม่ทั้งหมดใน app.module

@NgModule({
  declarations: [
    MyApp,
    RegisterPage,
    OtpPage,
    LoginPage,
    ForgetPasswordPage,ChatlistPage,ChatPage,TabsPage

    // AboutPage,

    // BusinessDetailDescPage,
    // BusinessDescPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot(),
    HttpClientModule,
    NgxBarcodeModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    RegisterPage,
    OtpPage,
    LoginPage,
    ForgetPasswordPage,ChatlistPage,ChatPage,TabsPage
    // AboutPage,

    // BusinessDetailDescPage,
    // BusinessDescPage
  ],

 - 


----------


---------