Link to brand new page produces error

I am new to Ionic and have a bit of struggle with basic things. That’s my simplest use case. I installed latest ionic framework and created simple “tabs” project:

ionic start tabsApp tabs

After that I added a new ‘test’ page to it:

cd tabsApp
ionic g page Test

Then I added the same kind of links to existing “About” page and to newly created “Test” page to the home.html:

  <button [navPush]="aboutPage">About Page</button>
  <button [navPush]="testPage">Test Page</button>

and modified home.ts a bit to import two pages like that:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { TestPage } from '../test/test';
import { AboutPage } from '../about/about';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  testPage = TestPage;
  aboutPage = AboutPage;  

  constructor(public navCtrl: NavController) {
  }
}

Now when I run ionic serve I see home page in a browser and can click on both links. The problem is that link to About page opens About page but link to Test page produces the following Runtime Error:

Uncaught (in promise): Error No component factory found for TestPage, Did you add it to @NgModule.entryComponents? ...

What I am doing wrong? From what I can see the main difference between about and test pages is that test page has test.module.ts in addition to test.ts and test.ts has @IonicPage() decorator while about.ts does not. What do I need to modify in that simple example to make navigation to that page working?

You need to update the ionic-cli.
About the error: Add TestPage in entrycomponents

I believe that my ionic version is up to date. ionic --version gave me 3.19.1

Are you talking about adding TestPage in entryComponents on a page or globally? Adding it to the page (neither parent not child) didn’t work for me. I did found that adding TestPage to declarations and entryComponents in app.module.ts fixes that problem. Do all pages need to be registered in global module? That doesn’t sound right.

Hi @gregr77,

This may be a problem with using lazy loading. I think some template projects are out of date with the latest packages and cause inconsistencies.

Take a quick look at the blog entry: Ionic and Lazy Loading Pt 1

And compare how the different pages are defined throughout the app.

Thank you. It makes perfect sense now. It is much easier to add links to
new pages that way and adds benefit of Lazy Loading too. I only wish that
official templates should use that method to make it more clear too.

Greg

Greg Ryjikh,
Senior Software Engineer
DDSN Net Pty Ltd
ABN 67 165 575 039

E: gregr@ddsn.com
W: http://www.ddsn.com
W: http://www.cm3cms.com
W: http://extranet.ddsn.com

Melbourne, Australia
Level 4, 574 St Kilda Rd, Melbourne, VIC 3004
P: +61 3 9533 8800

This email is sent commercial in confidence