Ionic 3 open modal is getting an error of not declared in entry component but it is already exist

Question

I having the following modal in ionic 3:

import { NgModule } from '@angular/core'; import { IonicPageModule } from 'ionic-angular'; import { LoginModalPage } from './login-modal';

@NgModule({
  declarations: [
    LoginModalPage,
  ],
  imports: [
    IonicPageModule.forChild(LoginModalPage),

  ],
  entryComponents: [LoginModalPage]
})
export class LoginModalPageModule {}

I want to use in app.component.ts/html:

import { LoginModalPage } from '../modals/login-modal/login-modal';
import { LoginModalPageModule } from '../modals/login-modal/login-modal.module';
export function init_app(appLoadService: InitializerService) {
  return () => {
      return appLoadService.initializeApp();
  }
}
@NgModule({
  declarations: [
    MyApp,
    HomePage,
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp, {
      preloadModules: true
    }),
    IonicPageModule.forChild(MyApp),
    HttpClientModule,
    LoginModalPageModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    GatewayService,
    UserService,
    GlobalVarService,
    AuthGuardService,
    HttpClient,
    InitializerService,
    {
      provide: APP_INITIALIZER,
      useFactory: init_app,
      deps: [InitializerService],
      multi: true
    },

  ]
})
export class AppModule {}

But I got the following error:

core.js:1449 ERROR Error: Uncaught (in promise): Error: No component factory found for [object Object]. Did you add it to @NgModule.entryComponents? Error: No component factory found for [object Object]. Did you add it to @NgModule.entryComponents?

I tried to add it inside entry component of app.module.ts, but got the following error:

LoginModalModule is declared in 2 components

I am not sure but can you try to add exports to your LoginModalPageModule exports: [ LoginModalPage ] — nevzatopcu

Chad Nehemiah Chad Nehemiah · Accepted Answer · 2019-04-20T21:16:57

In order to use it in the AppComponent you need to add it your declarations and entryComponents in your AppComponent.ts file

Add this in your AppComponent.ts,

declarations: [
  MyApp,
  HomePage,
  LoginModalPage
]

entryComponents: [
  LoginModalPage
]

add this to your LoginPageModule

exports: [ LoginPageModal ]

according to the definition of entryComponents

Specifies a list of components that should be compiled when this module is defined. For each component listed here, Angular will create a ComponentFactory and store it in the ComponentFactoryResolver.

Ionic 3 open modal is getting an error of not declared in entry component but it is already exist

1 Answers