Ionic2：無法打開下一頁：找不到組件工廠

我正在嘗試使用ionic2開發我的第一個應用程序。我開始做我的第一頁，一切正常，然後我決定添加第二頁，我面臨一個問題。當我點擊，應打開下一頁按鈕，加載它，但有以下錯誤：Ionic2：無法打開下一頁：找不到組件工廠

Runtime Error

Error in ./NewsHeadline class NewsHeadline - inline template:7:1 caused by: No component factory found for NewsPage

Stack

Error: No component factory found for NewsPage ...

Ionic Framework: 2.0.0 
Ionic Native: 2.4.1 
Ionic App Scripts: 1.0.0 
Angular Core: 2.2.1 
Angular Compiler CLI: 2.2.1 
Node: 6.9.4 
OS Platform: Linux 4.4 
Navigator Platform: Win32 
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36

但我dont't明白正是我缺少NewsPage聲明。

這是我home.html的

<ion-header> 
    <ion-navbar> 
    <ion-title>Home</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
<ion-list> 
    <h2 class="center">mY FIRST List</h2> 
    <ion-list> 
    <news-headline *ngFor="let notice of newsList" [news]="notice"> 
    </news-headline> 
</ion-list> 
</ion-list> 
</ion-content>

這是我的我的app.modules.ts

import { NgModule, ErrorHandler } from '@angular/core'; 
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; 
import { MyApp } from './app.component'; 
import { AboutPage } from '../pages/about/about'; 
import { ContactPage } from '../pages/contact/contact'; 
import { HomePage } from '../pages/home/home'; 
import { TabsPage } from '../pages/tabs/tabs'; 

import {NewsHeadline} from '../components/news/newsHeadline'; 

@NgModule({ 
    declarations: [ 
     MyApp, 
     AboutPage, 
     ContactPage, 
     HomePage, 
     TabsPage, 
     NewsHeadline 
    ], 
    imports: [ 
     IonicModule.forRoot(MyApp) 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
     MyApp, 
     AboutPage, 
     ContactPage, 
     HomePage, 
     TabsPage 
    ], 
    providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}] 
}) 

export class AppModule {}

雖然新聞page.ts只包含下面的代碼：

import { Component } from '@angular/core'; 
import { NavParams } from 'ionic-angular'; 
import {News} from '../../components/news/news'; 

@Component({ 
    selector: 'page-news-page', 
    templateUrl: 'news-page.html' 
}) 
export class NewsPage { 
    news: News; 

    constructor(navParams: NavParams) { 
     this.news = navParams.data; 
    } 
}

所以，問題的核心是在我的newsHeadline.ts文件中，其中包含以下代碼：

import {Component, Input} from '@angular/core'; 
import {News} from './news'; 
import {NewsPage} from '../../pages/news-page/news-page'; 
import { NavController } from 'ionic-angular'; 

@Component({ 
    selector: 'news-headline', 
    template: ` 
<ion-item> 
    <ion-thumbnail item-left> 
     <img src="{{news.imagePreviewUrl}}"> 
    </ion-thumbnail> 
    <h2>{{news.title}}</h2> 
    <p>{{news.date | date: 'dd/MM/yyyy'}}</p> 
    <button clear item-right (click)="goToNews(news)">Leggi</button> 
</ion-item>` 
}) 
export class NewsHeadline { 
    @Input() 
    news: News; 
    constructor(public navCtrl: NavController) {}  

    goToNews(news: News) { 
     this.navCtrl.push(NewsPage, news); 
    } 
}

來源

2017-02-04 pittuzzo

您需要將NewsPage添加到聲明和entryComponents。您需要對您創建的每個新頁面執行此操作。

UPDATE

What is difference between declarations, providers and import in NgModule

來源

2017-02-04 16:24:25

太感謝你了，這是工作:)你有一個鏈接，或者你可以給有關添加條目聲明和/或entryComponents當一個簡短exaplanation？ – pittuzzo

我已經爲你更新了鏈接：D –

Ionic2：無法打開下一頁：找不到組件工廠

回答

相關問題