错误:没有为GoogleCardLayout2找到组件工厂

Question

我有一个Ionic 3与角6模板应用程序，我试图重定向用户到另一个页面(点击)。我一直收到这条错误消息

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

我不知道这意味着什么。在".ts“文件中，我导入了第二页

import { GoogleCardLayout2 } from '../layout-2/google-card-layout-2';

，并设置一个函数将用户推送到下一页。

openTestpage() {

        this.navCtrl.push(GoogleCardLayout2);

    }

但我只是不断地遇到错误。这是我的html、ts和模块代码。

<div watch-now text-center (click)="openTestpage()">
                    <button ion-button button-icon icon-start>
                        <ion-icon icon-small [name]="item.icon"></ion-icon>
                        {{item.iconText}}
                    </button>

                </div>

TS文件

import { Component, Input, ViewChild } from '@angular/core';
import { IonicPage, Content, NavController } from 'ionic-angular';
import { GoogleCardLayout2 } from '../layout-2/google-card-layout-2';

@IonicPage()
@Component({
    selector: 'google-card-layout-1',
    templateUrl: 'google-card.html'

})
export class GoogleCardLayout1 {
    @Input() data: any;
    @Input() events: any;
    @ViewChild(Content)
    content: Content;
    slider = {};


    constructor(public navCtrl: NavController) {


    }

    openTestpage() {

        this.navCtrl.push(GoogleCardLayout2);

    }
}

模块TS文件

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { GoogleCardLayout1 } from './google-card-layout-1';

@NgModule({
    declarations: [
        GoogleCardLayout1,

    ],
    imports: [
        IonicPageModule.forChild(GoogleCardLayout1),
    ],
    exports: [
        GoogleCardLayout1
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

export class GoogleCardLayout1Module { }

app.module.ts

import { NgModule, ErrorHandler, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { BrowserModule } from '@angular/platform-browser';
import { MyApp } from './app.component';

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { AngularFireAuthModule } from 'angularfire2/auth';

import { AppSettings } from '../services/app-settings'
import { ToastService } from '../services/toast-service'
import { LoadingService } from '../services/loading-service'

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(AppSettings.FIREBASE_CONFIG),
    AngularFireDatabaseModule, AngularFireAuthModule, AngularFirestoreModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [MyApp],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [
    StatusBar, SplashScreen,
    ToastService, LoadingService,
    { provide: ErrorHandler, useClass: IonicErrorHandler }]
})
export class AppModule {
}

GoogleCardLayout2模块

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { GoogleCardLayout2 } from './google-card-layout-2';

@NgModule({
    declarations: [
        GoogleCardLayout2,
    ],
    imports: [
        IonicPageModule.forChild(GoogleCardLayout2),
    ],
    exports: [
        GoogleCardLayout2
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

export class GoogleCardLayout2Module { }

Answer 1

这个错误非常重要--您需要将它添加到entryComponent中的GoogleCardLayout2Module模块中。不要对您的GoogleCardLayout1Module进行任何更改。在您的GoogleCardLayout2Module中，您需要包括这样的GoogleCardLayout2：

// import GoogleCardLayout2 above
@NgModule({
    declarations: [
        GoogleCardLayout2
    ],
    entryComponents: [
        GoogleCardLayout2
    ],
    ...

Answer 2

因此，问题是，您需要将GoogleCardLayout2组件包含到模块中。

查看下面的代码，我得出结论: GoogleCardLayout2不是延迟加载的(否则您将在push方法中使用'string‘vs组件：

openTestpage() {

    this.navCtrl.push(GoogleCardLayout2);

}

这意味着您可以将此组件导入应用程序的模块并将其添加到entryComponents中：

import { NgModule, ErrorHandler, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { BrowserModule } from '@angular/platform-browser';
import { MyApp } from './app.component';

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { AngularFireAuthModule } from 'angularfire2/auth';

import { AppSettings } from '../services/app-settings'
import { ToastService } from '../services/toast-service'
import { LoadingService } from '../services/loading-service'

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HttpClientModule } from '@angular/common/http';

//import your non-lazy loaded module here but check the path!:
import { GoogleCardLayout2 } from '../layout-2/google-card-layout-2';

@NgModule({
  declarations: [
    MyApp,
    // also add this:
    GoogleCardLayout2
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(AppSettings.FIREBASE_CONFIG),
    AngularFireDatabaseModule, AngularFireAuthModule, AngularFirestoreModule
  ],
  bootstrap: [IonicApp],
  // now add your component here:
  entryComponents: [MyApp, GoogleCardLayout2],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [
    StatusBar, SplashScreen,
    ToastService, LoadingService,
    { provide: ErrorHandler, useClass: IonicErrorHandler }]
})
export class AppModule {
}

如果您决定将您的GoogleCardLayout2转换为一个延迟加载的模块，则方法将有所不同。您需要先在其文件夹中创建一个模块，然后将创建的模块导入GoogleCardLayout1 1的模块中。如果您可以共享GoogleCardLayout1 1的模块文件，我可以帮助添加代码。