Ionic2未捕获的承诺

Question

I am currently learning the ropes around Angular2 in Ionic2. I am going through a tutorial that is a bit outdated, and since i'm not 100% familiar with Angular2 environments, I can't debug this error:

Uncaught (in promise): Error: No component factory found for ReposPage. Did you add it to @NgModule.entryComponents? Error: No component factory found for ReposPage. Did you add it to @NgModule.entryComponents? at noComponentFactoryError

These are the files I've changed from a clean ionic2 install:

app.component.ts

 import { Component, ViewChild } from '@angular/core'; import { Platform, MenuController, Nav } from 'ionic-angular'; import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic'; import { ListPage } from '../pages/list/list'; import { UsersPage } from '../pages/users/users'; import { ReposPage } from '../pages/repos/repos'; import { OrganisationsPage } from '../pages/organisations/organisations'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; @Component({ templateUrl: 'app.html' }) export class MyApp { @ViewChild(Nav) nav: Nav; // make HelloIonicPage the root (or first) page rootPage = HelloIonicPage; pages: Array<{title: string, component: any}>; constructor( public platform: Platform, public menu: MenuController, public statusBar: StatusBar, public splashScreen: SplashScreen ) { this.initializeApp(); // set our app's pages this.pages = [ { title: 'Users', component: UsersPage }, { title: 'Repos', component: ReposPage }, { title: 'Organisations', component: OrganisationsPage }, { title: 'Hello Ionic', component: HelloIonicPage }, { title: 'My First List', component: ListPage } ]; } initializeApp() { this.platform.ready().then(() => { // Okay, so the platform is ready and our plugins are available. // Here you can do any higher level native things you might need. this.statusBar.styleDefault(); this.splashScreen.hide(); }); } openPage(page) { // close the menu when clicking a link from the menu this.menu.close(); // navigate to the new page if it is not the current page this.nav.setRoot(page.component); } } 

app.module.ts

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule, ErrorHandler } from '@angular/core'; import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; import { MyApp } from './app.component'; import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic'; import { ItemDetailsPage } from '../pages/item-details/item-details'; import { ListPage } from '../pages/list/list'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; @NgModule({ declarations: [ MyApp, HelloIonicPage, ItemDetailsPage, ListPage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp), ], bootstrap: [IonicApp], entryComponents: [ MyApp, HelloIonicPage, ItemDetailsPage, ListPage ], providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler} ] }) export class AppModule {} 

I have also created 3 pages through the ionic g page command.

any help on this issue would be grateful.

Answer 1

You need to include ReposPage in ngModule in app.module.ts . It should be present in both declarations and entryComponents array.

@NgModule({
  declarations: [
    MyApp,
    HelloIonicPage,
    ItemDetailsPage,
    ListPage,
    ReposPage //here
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HelloIonicPage,
    ItemDetailsPage,
    ListPage,
    ReposPage //here
  ],

Answer 2

as the error message clearly saying, you need to add 'ReposPage' to the entryComponents array in app.modules.ts file. Also you would need to add it as a declaration.

declarations: [ MyApp, HelloIonicPage, ItemDetailsPage, ListPage, ReposPage ]

entryComponents: [ MyApp, HelloIonicPage, ItemDetailsPage, ListPage, ReposPage ]