CODEWITHSUNDEEP
angularionic-frameworkionic2ionic3
Kode Bryant
Kode Bryant

Reputation: 511

'No component factory found for [custom component]' in Angular|Ionic

I'm using Ionic 3 with lazy-loaded pages. When trying to present a modal within a component within the page I get the following error:

No component factory found for CourseEditorComponent. Did you add it to @NgModule.entryComponents?

As you can see down below, I've added the CourseEditorComponent as entryComponent to courses.modules.ts, which gets imported by dashboard.modules.ts.

Am I getting something wrong about the way custom entryComponents are used in Angular/Ionic?

Hierarchy

DashboardPage
-CoursesComponent
--CourseEditorComponent
--CourseCreatorComponent
-InstructorsComponent

Modules

dashboard.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { DashboardPage } from './dashboard';
import { CoursesModule } from "./courses/courses.module";

@NgModule({
  declarations: [
    DashboardPage
  ],
  imports: [
    IonicPageModule.forChild(DashboardPage),
    CoursesModule
  ],
})
export class DashboardPageModule {}

course.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { CoursesComponent } from './courses';
import { CourseEditorComponent } from "./course-editor/course-editor";

@NgModule({
  declarations: [CoursesComponent],
  imports: [IonicPageModule.forChild(DashboardPage)],
  entryComponents: [CourseEditorComponent],
  exports: [CoursesComponent,CourseEditorComponent]
})
export class CoursesModule {}

CourseComponent

import { Component } from '@angular/core';
import { ModalController } from 'ionic-angular';
import { CourseEditorComponent } from "./course-editor/course-editor";

@Component({
  selector: 'courses',
  templateUrl: 'courses.html',
})
export class CoursesComponent {
  editCourse(data) {
    let editor = this.modal.create(CourseEditorComponent,{course: data});
    editor.present();
  }
}

Upvotes: 2

Views: 4382

Answers (2)

Rahul Singh
Rahul Singh

Reputation: 19640

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ],
  entryComponents: [your modal component] // you need to add it to entry component
})
export class AppModule { }

As of now there is no support for the same there is a issue reported for the same in the Angular git repo LINK

Using an EntryComponentsModule

Import EntryComponentsModule (where you define all entryComponents) to AppModule until the issue is fixed.

Using CourseEditorComponent as page

Turn CourseEditorComponent into a page and change modal.create(CourseEditorComponent) to modal.create('CourseEditorComponent')

Upvotes: 5

Fateh Mohamed
Fateh Mohamed

Reputation: 21397

you have to add it under declarations[] and entryComponents

Upvotes: 3

Related Questions