尝试从一个页面推送到另一个页面时出现“找不到组件工厂”错误答案

【问题标题】："No component factory found for" Error When trying to push from one Page to another尝试从一个页面推送到另一个页面时出现“找不到组件工厂”错误
【发布时间】：2018-02-16 21:24:55
【问题描述】：

尝试从一页推送到另一页时出现错误。当我尝试推送到同一页面时，它不会给出该错误。从一页推送到另一页时，只有我会出错。 'setRoot()' 也没有给出错误。

this.navCtrl.push( Page7 );

我已将 Page7 添加到 app.module.ts。

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';

import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';
import { Page3 } from '../pages/page3/page3';
import { Page4 } from '../pages/page4/page4';
import { Page5 } from '../pages/page5/page5';
import { Page6 } from '../pages/page6/page6';
import { Page7 } from '../pages/page7/page7';

@NgModule({
declarations: [
MyApp,
Page1,
Page2,
Page3,
Page4,
Page5,
Page6,
Page7
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
Page1,
Page2,
Page3,
Page4,
Page5,
Page6,
Page7
],
providers: []
})

export class AppModule {}

这是一个离子 2 应用程序。它给出了这个错误。

EXCEPTION: Error in ./Page6 class Page6 - inline template:21:56 caused by: No component factory found for Page7

console error

【问题讨论】：

标签： angular ionic2

【解决方案1】：

我找到了解决方案。您必须将尝试推送的页面添加到父目录。这也应该包含在@NgModule 中。

import {ApiServices} from '../../providers/api-services';
import { Visualizer } from '../Page7/Page7';

@Component({
  selector: 'page-page6',
  templateUrl: 'page6.html',
  providers: [ ApiServices ],
  entryComponents:[ Page7 ]
})

export class Page6 {
    tapped(event, id ) {
      this.navCtrl.push( Page7,{
       id: id
      });
    }
}

【讨论】：

更具体地说，您必须将您的页面添加到“entryComponents”列表中。使用 Component-decorator 的“entryComponents”-Property 或在 NgModule-Decorator 相关的“entryComponents”-Property 中执行此操作并不重要。所有页面都必须以某种方式出现在此列表中。否则 Angular 不会为此组件创建工厂。 Ionic-Docs / Angular-Docs 对此并不十分清楚。您是否放置源代码也无关紧要，但在提前角 (AoT) 编译方面，大写字母确实发挥了作用。小心点。
Ionic 2.0.0 已修复此问题。

【解决方案2】：

您是否将您的组件放入了exports[] 中的@NgModule 中？还是entryComponents？

@NgModule({
    imports: [
        MaterialModule.forRoot(),
    ],
    exports: [
        ConfirmDialog,
    ],
    declarations: [
        ConfirmDialog,
    ],
    providers: [
        DialogsService,
    ],
    entryComponents: [
        ConfirmDialog,
    ],

【讨论】：

看起来您的代码不完整，不是吗？此外，您在提出问题后提供了代码，因此不清楚您提供的代码究竟做了什么。请澄清。
我把它放在 ngModule 上。无需进行出口。只需要穿上 declerations 和 entry 组件。
是的，这个过程也适用于我的情况。有 3 个地方应该提到该组件：1. 在导入组件时，2. 添加 'declerations' 和 3. 在 @NgModule 中添加 entryComponents。就是这样。

【解决方案3】：

你可以这样做。

在导入或创建 home.module.ts 后，

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';

@NgModule({
  declarations: [
    HomePage,
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
  ],
})
export class HomePageModule {}

删除所有导入页面链接。例如，

import { HomePage } from '../pages/home/home';

然后，替换页面链接，例如，

rootPage: any = HomePage; with rootPage: any = 'HomePage';

或者，

this.navCtrl.push(HomePage); 与 this.navCtrl.push('HomePage');

即在单引号或双引号内写类名。

【讨论】：

rootPage: any = HomePage; with rootPage: any = 'HomePage'; - 如果我没有错过页面名称周围的引号，我可以节省一些头发

【解决方案4】：

你可能不想把它放在引号里：

let modal = this.modalCtrl.create("SearchPage")

而不是（不正确的）：

let modal = this.modalCtrl.create(SearchPage)

【讨论】：

【解决方案5】：

我认为错误可能是您导入时路径中的大写字母，这对我有用。

【讨论】：