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的模块文件，那么我可以帮助添加代码。

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

2 个答案: