javascript - 错误:未找到 GoogleCardLayout2 的组件工厂
问题描述
我有一个带有 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 { }
解决方案
所以是的,问题在于您需要将 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 的模块文件,我可以帮助添加代码。
推荐阅读
- assembly - 程序集 x86,如何将二进制文件作为整数写入文件
- reactjs - 您可以从启用 SSL 的安全 ReactJs 应用程序通过纯 HTTP 调用 ExpressJS 托管的 REST API 吗?
- facebook - 在 facebook 中为动态广告“PIXELS MISSING PARAMETER IN DPA EVENTS”收到此错误有什么建议吗?
- python - 在 jupyter lab 中与图形交互
- php - 为什么事务阻塞 MySQL 中的简单插入?
- javascript - 如何从目录对象数组中制作 Material TreeView?
- python - 我可以在 `np.linspace` 中插入“0”吗?
- javascript - Chrome 上的硬刷新
- reactjs - 尝试从 ConsenSys 安装 Rimble 但遇到错误。“无法解决依赖关系:react@”^16.9.0,来自 rimble-ui@0.14.0“我该怎么办?
- javascript - 当通过 AJAX 向 FLASK API 发出 POST 请求时,页面会无限次重新加载