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 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
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 component 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 component name. With this one it was easy to fix because I knew exactly which component was missing from the entryCompoents.
Please see below my media.component.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.
Any help/advice would be much appreciated and thanks in advance for your comments and suggestions.
from No component factory found for [object Object]. Did you add it to @NgModule.entryComponents?
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
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 component 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 component name. With this one it was easy to fix because I knew exactly which component was missing from the entryCompoents.
Please see below my media.component.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.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);
}
);
}
}
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();
}
}
/* 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 { }
Any help/advice would be much appreciated and thanks in advance for your comments and suggestions.
from No component factory found for [object Object]. Did you add it to @NgModule.entryComponents?
