javascript - 找不到 [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] [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]