I understand that this will probably be marked as a duplicate as it has been asked many times on various forums i.e.

Error: No ponent factory found for [object Object]

/

And many more.

The problem is that none of the answers online helped me resolve my issue and hence why I'm submitting another question.

When the user clicks on the Edit button below I'm wanting a modal containing a form to pop up to allow the user to edit the fields.

From my research, I sort understand what cause this and I think its to do with calling a ponent that is missing from the entryConponents parameter in the app.module.ts file. I have had this issue before but instead of [object] [object] at the end it was a specific ponent name. With this one it was easy to fix because I knew exactly which ponent was missing from the entryCompoents.

Please see below my mediaponent.ts. For the experienced angular programmers, I am aware that jquery is the absolute worst thing to use with angular but as DataTables is jquery based it was a last resort.

 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-modalponent';
 import * as $ from 'jquery';
 import 'datatables';
 import 'datatables-bs4';

 @Component({
   selector: 'app-media',
   templateUrl: './mediaponent.html',
   styleUrls: ['./mediaponent.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);


         }
         );

   }



 }

Please see below my media-modalponent.ts. This the ts file that contains the content for the modal.

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-modalponent.html',
  styleUrls: ['./media-modalponent.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();
  }

}

Please see below my app.module.ts file which apparently is missing a ponent from entryComponents...

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

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

/* other features/styles */
import { HttpClientModule } from '@angular/mon/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';

/* ponents/services within the app */
import { LoginComponent } from './views/login/loginponent';
import { NavbarComponent } from './views/navbar/navbarponent';
import { NewuserComponent } from './views/newuser/newuserponent';
import { HomeComponent } from './views/home/homeponent';
import { AdminComponent } from './views/admin/adminponent';
import { ClientComponent } from './views/staff-views/client/clientponent';
import { PortalComponent } from './views/portal/portalponent';
import { StaffComponent } from './views/staff/staffponent';
import { AppointmentsComponent } from './views/staff-views/appointments/appointmentsponent';
import { SettingsComponent } from './views/staff-views/settings/settingsponent';
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/mediaponent';
import { DbFieldsService } from './services/dbFields/db-fields.service';
import { MediaService } from './services/media/media.service';
import { MediaModalComponent } from './views/staff-views/media-modal/media-modalponent';



@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 { }

Finally, last thing to say is that I'm fairly new to angular and I'm sort of learning and developing this product at the same time.

Any help/advice would be much appreciated and thanks in advance for your ments and suggestions.

I understand that this will probably be marked as a duplicate as it has been asked many times on various forums i.e.

Error: No ponent factory found for [object Object]

https://mdbootstrap./support/angular/no-ponent-factory-found-for-modalbackdropponent/

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

And many more.

The problem is that none of the answers online helped me resolve my issue and hence why I'm submitting another question.

When the user clicks on the Edit button below I'm wanting a modal containing a form to pop up to allow the user to edit the fields.

From my research, I sort understand what cause this and I think its to do with calling a ponent that is missing from the entryConponents parameter in the app.module.ts file. I have had this issue before but instead of [object] [object] at the end it was a specific ponent name. With this one it was easy to fix because I knew exactly which ponent was missing from the entryCompoents.

Please see below my media.ponent.ts. For the experienced angular programmers, I am aware that jquery is the absolute worst thing to use with angular but as DataTables is jquery based it was a last resort.

 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.ponent';
 import * as $ from 'jquery';
 import 'datatables';
 import 'datatables-bs4';

 @Component({
   selector: 'app-media',
   templateUrl: './media.ponent.html',
   styleUrls: ['./media.ponent.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);


         }
         );

   }



 }

Please see below my media-modal.ponent.ts. This the ts file that contains the content for the modal.

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.ponent.html',
  styleUrls: ['./media-modal.ponent.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();
  }

}

Please see below my app.module.ts file which apparently is missing a ponent from entryComponents...

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

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

/* other features/styles */
import { HttpClientModule } from '@angular/mon/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';

/* ponents/services within the app */
import { LoginComponent } from './views/login/login.ponent';
import { NavbarComponent } from './views/navbar/navbar.ponent';
import { NewuserComponent } from './views/newuser/newuser.ponent';
import { HomeComponent } from './views/home/home.ponent';
import { AdminComponent } from './views/admin/admin.ponent';
import { ClientComponent } from './views/staff-views/client/client.ponent';
import { PortalComponent } from './views/portal/portal.ponent';
import { StaffComponent } from './views/staff/staff.ponent';
import { AppointmentsComponent } from './views/staff-views/appointments/appointments.ponent';
import { SettingsComponent } from './views/staff-views/settings/settings.ponent';
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.ponent';
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.ponent';



@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 { }

Finally, last thing to say is that I'm fairly new to angular and I'm sort of learning and developing this product at the same time.

Any help/advice would be much appreciated and thanks in advance for your ments and suggestions.

• javascript
• html
• angular
• typescript

• Just a stab in the dark here but I noticed that media-modal.ponent.ts does not have entryComponents: [MediaModalComponent] in its @Component annotation – jlewkovich Commented Jan 25, 2020 at 19:55

2 Answers 2

If you are loading any ponent dynamically then you need to put it in both declarations and entryComponent:

entryComponents: [MediaModalComponent]

It's pletely wrong to put ponent into providers:

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

and then use it through DI

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

You should be passing ponent type to modalService.open method:

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

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