找不到[object Object]的组件工厂。你把它添加到@NgModule.entryComponents了吗？

Question

我知道这可能会被标记为副本，因为它已经在各种论坛上被多次询问，即

Error: No component factory found for [object Object]

https://mdbootstrap.com/support/angular/no-component-factory-found-for-modalbackdropcomponent/

https://github.com/akveo/ngx-admin/issues/2139

还有更多。

问题是，网上的答案都没有帮助我解决我的问题，因此我提交了另一个问题。

当用户单击下面的编辑按钮时，我希望弹出一个包含表单的模式，以允许用户编辑字段。

​

​

从我的研究中，我大致了解了导致这种情况的原因，我认为这与调用app.module.ts文件中entryConponents参数中缺失的组件有关。我以前也遇到过这个问题，但最后它不是object，而是一个特定的组件名称。这个问题很容易修复，因为我确切地知道entryCompoents中缺少哪个组件。

请看下面我的media.component.ts。对于经验丰富的angular程序员来说，我知道使用jquery对于angular来说绝对是最糟糕的事情，但由于DataTables是基于jquery的，所以这是万不得已的。

 import { Component, OnInit } from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { Media } from '../../../classes/media';
 import { MediaService } from '../../../services/media/media.service';
 import { MediaEdit } from '../../../classes/media-edit';
 import { MediaModalComponent } from '../media-modal/media-modal.component';
 import * as $ from 'jquery';
 import 'datatables.net';
 import 'datatables.net-bs4';

 @Component({
   selector: 'app-media',
   templateUrl: './media.component.html',
   styleUrls: ['./media.component.css'],
   providers: [
     MediaService, 
     MediaModalComponent,
     NgbModal
   ],
   entryComponents: [MediaModalComponent]
 })
 export class MediaComponent implements OnInit {

   media$: Array<Media> = []; 
   media: Media;
   mediaEdit: MediaEdit;
   dtOptions: any = {}

   constructor(
     private MediaService: MediaService,
     private modalService: NgbModal,
     private MediaModal: MediaModalComponent
   ) { }

    open(code,desc,type,message) {  
     this.modalService.open(
       this.MediaModal,
       {
         size: 'xl',
         windowClass: 'custom-class'
       });

       this.MediaModal.mediaForm.patchValue({
        code: code,
        desc: desc,
        type: type,
        message: message
       });

    }

   ngOnInit() {
     this.getMediaData();
     this.dtOptions = {
       select: true,  
       colReorder: {
         order: [1, 0, 2],
         fixedColumnsRight: 2
     }
   }
   }

   getMediaData(){
     return this.MediaService.getMedia()
       .subscribe(data => this.processMedia(data));
   }

   processMedia(rawData){
     /* get the number of users from the temp-table returned */
     const numRecs = rawData.ttMedia[0].mm_count;

     for(let i = 0; i < numRecs; i++) {
       this.media = rawData.ttMedia[i];
       this.media$.push(this.media);

     }
   }



   editMedia(){
       $('#mediaTable tbody').on('click', 'tr', (element) => {

           let data = $('#mediaTable').DataTable().row( element.currentTarget ).data();
           let code = data[0];
           let desc = data[1];
           let type = "";
           if(data[3] = "yes") {
             type = "SMS";
           } else if(data[4] = "yes") {
             type = "Email";
           }

           let message = data[5];
           this.open(code,desc,type,message);


         }
         );

   }



 }

请看下面我的media-modal.component.ts。这是包含模式内容的ts文件。

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { DbField } from '../../../classes/db-field';
import { DbFieldsService } from '../../../services/dbFields/db-fields.service';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-media-modal',
  templateUrl: './media-modal.component.html',
  styleUrls: ['./media-modal.component.css'],
  providers: [
    DbFieldsService
  ]
})

export class MediaModalComponent implements OnInit {

  mediaForm: FormGroup;
  dbFields$: Array<DbField> = [];
  dbField: DbField;
  loaded:string = "";


  constructor(
    private fb: FormBuilder,
    public activeModal: NgbActiveModal,
    private DbFieldsService: DbFieldsService
  ) {

    this.mediaForm = this.fb.group({
      type: ['', Validators.required],
      code: ['', Validators.required],
      description: ['', Validators.required],
      file: ['', Validators.required],
      dbFieldValue: ['', Validators.required],
      message: ['', Validators.required]
    });

   }

   getDbFields(){
     return this.DbFieldsService.getFields()
        .subscribe(data => this.processFields(data));
   }

   processFields(rawData){
     const numRecs = rawData.ttFields[0].mmf_count;

     for(let i = 0; i < numRecs; i++) {
       this.dbField = rawData.ttFields[i];
       this.dbFields$.push(this.dbField);

     }
     this.loaded = "true";

   }

   addField(){

     let newMessage = this.mediaForm.value.message + String.fromCharCode(171) + 
     this.mediaForm.value.dbFieldValue + String.fromCharCode(187);
     let test = this.mediaForm.value.description + " " + this.mediaForm.value.description;

  this.mediaForm.patchValue({
      message: newMessage
  });

  }

  ngOnInit() {
    this.getDbFields();
  }

}

请看下面我的app.module.ts文件，该文件显然缺少来自entryComponents的一个组件...

/* Standard Modules */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

/* Navigation Modules */import { AppRoutingModule } from './app-routing.module';
import { RouterModule, Routes } from '@angular/router';

/* other features/styles */
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { DataTablesModule } from 'angular-datatables';
import { NgbModule, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';


/* SyncFusion Modules */
import { SidebarModule } from '@syncfusion/ej2-angular-navigations';

/* components/services within the app */
import { LoginComponent } from './views/login/login.component';
import { NavbarComponent } from './views/navbar/navbar.component';
import { NewuserComponent } from './views/newuser/newuser.component';
import { HomeComponent } from './views/home/home.component';
import { AdminComponent } from './views/admin/admin.component';
import { ClientComponent } from './views/staff-views/client/client.component';
import { PortalComponent } from './views/portal/portal.component';
import { StaffComponent } from './views/staff/staff.component';
import { AppointmentsComponent } from './views/staff-views/appointments/appointments.component';
import { SettingsComponent } from './views/staff-views/settings/settings.component';
import { LoginService } from './services/login/login.service';
import { ClientService } from './services/clients/client.service';
import { ConstantsService } from './services/constants/constants.service';
import { FunctionsService } from './services/functions/functions.service';
import { ValUserService } from './services/valUser/val-user.service';
import { MediaComponent } from './views/staff-views/media/media.component';
import { DbFieldsService } from './services/dbFields/db-fields.service';
import { MediaService } from './services/media/media.service';
import { MediaModalComponent } from './views/staff-views/media-modal/media-modal.component';



@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    NavbarComponent,
    NewuserComponent,
    HomeComponent,
    AdminComponent,
    ClientComponent,
    PortalComponent,
    StaffComponent,
    AppointmentsComponent,
    SettingsComponent,
    MediaComponent,
    MediaModalComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    SidebarModule,
    DataTablesModule,
    NgbModule
  ],

  providers: [
    LoginService,
    ClientService,
    ConstantsService,
    FunctionsService,
    ValUserService,
    DbFieldsService,
    MediaService,
    NgbActiveModal,
    MediaModalComponent

  ],
  bootstrap: [AppComponent],
  entryComponents: [
    MediaModalComponent,
  ]
})
export class AppModule { }

最后，我要说的最后一件事是，我对angular相当陌生，同时我也在学习和开发这个产品。

任何帮助/建议都将不胜感激，并提前感谢您的意见和建议。

Answer 1

如果你要动态加载任何组件，那么你需要把它放在声明和entryComponent中：

entryComponents: [MediaModalComponent]

Answer 2

将组件放入providers是完全错误的

providers: [
  MediaService, 
  MediaModalComponent,  <========== why is it here? remove it
  NgbModal
],

然后通过DI使用它

constructor(
  private MediaService: MediaService,
  private modalService: NgbModal,
  private MediaModal: MediaModalComponent  <==== why??? remove it
) { }

您应该将组件类型传递给modalService.open方法：

open(code,desc,type,message) {  
 const modalRef = this.modalService.open(
   MediaModalComponent,  // this.MediaModal,
   {
     size: 'xl',
     windowClass: 'custom-class'
   });

 modalRef.componentInstance.mediaForm.patchValue({
    code: code,
    desc: desc,
    type: type,
    message: message
 });
}