Ionic2: can't open next page: No component factory found

Question

I'm trying to develop my first app using ionic2. I start doing my first page and everything works fine, then I decided to add the second page and I faced an issue. When I click on the button which should open the next page, it is loaded but with the following error:

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

But I dont't understand exactly where I missing the NewsPage declaration.

This is my 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>

this is my my 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 {}

While news-page.ts simply contains the following code:

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;
    }
}

So, the core of the problem is in my newsHeadline.ts file, which contains the following code:

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); 
    } 
}

score 1 · Accepted Answer · edited May 23 '17 at 12:33

1

You need to add NewsPage to both declarations and entryComponents. You need to do this to every new page you create.

UPDATE

What is difference between declarations, providers and import in NgModule

edited May 23 '17 at 12:33

Community

1
1

answered Feb 04 '17 at 16:24

Gabriel Barreto

6,411
2
24
47

Thank you so much, it is working :) Do you have a link or can you give a brief exaplanation about when adding entries to declarations and/or entryComponents? – pittuzzo Feb 04 '17 at 16:31

Ionic2: can't open next page: No component factory found

1 Answers1