错误：未找到 GoogleCardLayout2 的组件工厂

Question

我有一个带有 Angular 6 模板应用程序的 Ionic 3，我正在尝试将用户重定向到另一个页面（点击时）。我不断收到此错误消息

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和模块代码

HTML

<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

该错误的含义与它所说的差不多 - 您需要将其添加到 GoogleCardLayout2Module 模块中的 entryComponent 中。不要对您的 GoogleCardLayout1Module 进行任何更改。在您的 GoogleCardLayout2Module 中，您需要像这样包含 GoogleCardLayout2：

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

Answer 2

所以是的，问题在于您需要将 GoogleCardLayout2 组件包含到模块中。

查看下面的代码，我得出结论 GoogleCardLayout2 不是延迟加载的（否则你会在 push 方法中使用 'string' vs Component：

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 的模块。如果您可以共享 GoogleCardLayout1 的模块文件，我可以帮助添加代码。