Sudut 4: tidak ada pabrik komponen yang ditemukan, apakah Anda menambahkannya ke @ NgModule.entryComponents?

Saya menggunakan template Angular 4 dengan webpack dan saya memiliki kesalahan ini ketika saya mencoba menggunakan komponen (ConfirmComponent):

Tidak ditemukan pabrik komponen untuk ConfirmComponent. Apakah Anda menambahkannya ke @ NgModule.entryComponents?

Komponen dideklarasikan dalam app.module.server.ts

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

Saya juga app.module.browser.tsdanapp.module.shared.ts

Bagaimana saya bisa memperbaikinya?

Tambahkan ini di module.ts,

declarations: [
  AppComponent,
  ConfirmComponent
]

jika ConfirmComponent ada di modul lain, Anda perlu mengekspornya di sana sehingga Anda dapat menggunakannya di luar, tambahkan:

exports: [ ConfirmComponent ]

--- Perbarui Angular 9 atau Angular 8 dengan Ivy diaktifkan secara eksplisit ---

Komponen Masuk Dengan Ivy tidak diperlukan lagi dan sekarang sudah usang

--- untuk Angular 9 dan 8 dengan Ivy dinonaktifkan ---

Dalam kasus komponen yang dimuat secara dinamis dan agar ComponentFactory dihasilkan, komponen tersebut juga harus ditambahkan ke entri modulComponents:

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

sesuai dengan definisi entryComponents

Menentukan daftar komponen yang harus dikompilasi ketika modul ini didefinisikan. Untuk setiap komponen yang tercantum di sini, Angular akan membuat ComponentFactory dan menyimpannya di ComponentFactoryResolver.

Lihat detail tentang entryComponent:

Jika Anda memuat komponen apa pun secara dinamis maka Anda harus memasukkannya ke dalam keduanya declarationsdan entryComponent:

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

TL; DR: Layanan di ng6 dengan providedIn: "root"tidak dapat menemukan ComponentFactory ketika Komponen tidak ditambahkan dalam entryComponentsdari app.module .

Masalah ini juga dapat terjadi jika Anda menggunakan angular 6 dalam kombinasi dengan pembuatan Komponen dalam layanan secara dinamis!

Misalnya, membuat Hamparan:

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

  constructor(private _overlay: Overlay) {}

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

    overlayRef.attach(portal).instance;
  }
}

Masalahnya adalah

tersedia di: "root"

definisi, yang menyediakan layanan ini di app.module .

Jadi, jika layanan Anda berada di, misalnya, "OverlayModule", di mana Anda juga mendeklarasikan OverlayExampleComponent dan menambahkannya ke entriComponents, layanan tidak dapat menemukan ComponentFactory for OverlayExampleComponent.

Saya memiliki masalah yang sama. Dalam hal imports [...]ini sangat penting, karena itu tidak akan berhasil jika Anda tidak mengimpor NgbModalModule.

Deskripsi kesalahan mengatakan bahwa komponen harus ditambahkan ke entryComponentsarray dan itu jelas, tetapi pastikan Anda telah menambahkan ini di tempat pertama:

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

Tambahkan komponen itu ke entryComponents di @NgModule dari modul aplikasi Anda:

entryComponents:[ConfirmComponent],

serta Deklarasi:

declarations: [
    AppComponent,
    ConfirmComponent
]

Tambahkan 'NgbModalModule' di impor dan nama komponen Anda di entryComponents App.module.ts seperti yang ditunjukkan di bawah ini

Tempatkan komponen yang dibuat secara dinamis ke komponen entry di bawah fungsi @NgModuledecorator.

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

Saya memiliki masalah yang sama dengan sudut 6, itulah yang bekerja untuk saya:

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

})

Jika Anda memiliki layanan seperti ConfirmService , harus dinyatakan dalam penyedia modul saat ini, bukan root

Saya memiliki masalah yang sama untuk modal bootstrap

impor {NgbModal} dari '@ ng-bootstrap / ng-bootstrap';

Jika ini adalah kasus Anda, tambahkan saja komponen ke deklarasi modul dan entryComponents seperti yang disarankan tanggapan lain, tetapi juga tambahkan ini ke modul Anda

impor {NgbModule} dari '@ ng-bootstrap / ng-bootstrap';

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

Kesalahan ini terjadi ketika Anda mencoba memuat komponen secara dinamis dan:

1. Komponen yang ingin Anda muat bukan modul perutean
2. Komponen tidak ada dalam modul entri komponen.

dalam routingModule

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

atau dalam modul

entryComponents: [
ConfirmComponent
} 

Untuk memperbaiki kesalahan ini, Anda dapat menambahkan router ke komponen atau menambahkannya ke entryComponents modul.

1. Tambahkan router ke component.drawback dari pendekatan ini adalah komponen Anda akan dapat diakses dengan url itu.
2. Tambahkan ke entryComponents. dalam hal ini komponen Anda tidak akan memiliki url yang melekat dan itu tidak akan dapat diakses dengan url.

Saya memiliki masalah yang sama di Angular7 ketika saya membuat komponen dinamis. Ada dua komponen (TreatListComponent, MyTreatComponent) yang perlu dimuat secara dinamis. Saya baru saja menambahkan array entryComponents ke file app.module.ts saya.

    entryComponents: [
    TreatListComponent,
    MyTreatComponent
  ],

jika Anda menggunakan perutean di aplikasi Anda

pastikan Tambahkan komponen baru ke jalur perutean

sebagai contoh :

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

Dalam kasus saya, saya tidak perlu entriComponents sama sekali - hanya pengaturan dasar seperti yang dijelaskan dalam tautan di bawah ini, tetapi saya perlu memasukkan impor di modul aplikasi utama dan modul terlampir.

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

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

Anda hanya perlu menambahkannya ke entriComponents jika komponen akan dimasukkan dalam modal. Dari dokumen:

Anda dapat melewati komponen yang ada sebagai konten dari jendela modal. Dalam hal ini jangan lupa untuk menambahkan komponen konten sebagai bagian entryComponents dari NgModule Anda.

Saya mendapatkan masalah yang sama dengan ag-grid menggunakan komponen dinamis. Saya menemukan Anda perlu menambahkan komponen dinamis ke modul ag-grid .withComponents []

impor: [StratoMaterialModule, BrowserModule, AppRoutingModule, HttpClientModule, BrowserAnimationsModule, NgbModule.forRoot (), FormsModule, ReactiveFormsModule, AppRoutingModule, AgGridModule.withComponents (ProjectUpdateButtonComponent) ],

Dalam kasus saya, saya lupa menambahkan MatDialogModuleimpor dalam modul anak.

Untuk klarifikasi di sini. Jika Anda tidak menggunakan ComponentFactoryResolverlangsung dalam komponen, dan Anda ingin abstrak ke layanan, yang kemudian disuntikkan ke dalam komponen Anda harus memuatnya di bawah penyedia untuk modul itu, karena jika malas dimuat itu tidak akan berfungsi.

Jika Anda masih memiliki kesalahan setelah memberikan kelas dialog komponen entryComponents, cobalah untuk me ng serve- restart - itu berhasil untuk saya.

Kesalahan saya adalah memanggil metode terbuka NgbModal dengan parameter yang salah dari .html

Anda harus mengimpor NgbModuledalam modul seperti ini:

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

1. entryComponentssangat penting. Di atas jawaban ini benar.

Tapi...

2. Jika Anda menyediakan layanan yang membuka modal (pola umum) dan modul Anda yang mendefinisikan komponen dialog tidak dimuat di AppModule, Anda perlu perubahan providedIn: 'root'untuk providedIn: MyModule. Sebagai praktik umum yang baik, Anda harus menggunakan providedIn: SomeModuleuntuk semua layanan dialog yang ada dalam modul.

Saya menggunakan Angular8, dan saya mencoba membuka komponen secara dinamis dari modul lain , Dalam hal ini, Anda perlu import the modulemasuk ke modul yang mencoba membuka komponen, tentu saja di samping export komponen dan daftar ke dalam entryComponentsarray seperti jawaban sebelumnya.

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

Dalam kasus saya, saya memecahkan masalah ini dengan:
1) menempatkan NgxMaterialTimepickerModuledi app module imports:[ ]
2) menempatkan NgxMaterialTimepickerModuledi testmodule.ts imports:[ ]
3) menempatkan testcomponentdi declartions:[ ]danentryComponents:[ ]

(Saya menggunakan versi sudut 8+)

Nyatakan semua halaman baru di 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
  ],

 - 


----------


---------