Ionic-framework: Error using multiple @IonicPage and setting rootPage by name

Created on 22 Jun 2017  路  4Comments  路  Source: ionic-team/ionic-framework

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
Cannot set rootPage using page's name (as string), only if I reference to the component itself.

Expected behavior:
It's expected to work as documented.

I need to be able to do:

this.nav.setRoot('my-page-name-as-i-defined')

Steps to reproduce:
Using latest ionic version:

  • ionic start bug - Choose sidemenu, use or not cordova don't change the bug.
  • ionic g page FirstPage
  • ionic g page SecondPage
  • Add (and import) FirstPageModule to our AppModule on imports
  • Add (and import) SecondPageModule to our AppModule on imports
  • Go to app.component@openPage, and replace it content with: this.nav.setRoot('FirstPage');
  • Serve the application, and click on any item on menu.

You will see the error:

Uncaught (in promise): TypeError: undefined is not a function TypeError: undefined is not a function at Array.map (<anonymous>) at webpackAsyncContext
  • Now go to app.module.ts and comment SecondPageModule.
  • Try clicking on menu item again. Everything works fine.

Related code:

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.4.0
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Ionic Framework                 : ionic-angular 3.4.2

System:

    Node       : v6.11.0
    OS         : Linux 4.4
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 3.10.10 

Most helpful comment

Hello, thanks for using Ionic! This is something that we are already tracking and are currently working on a fix that should be in the next release.

All 4 comments

Tried to create a plunker to reproduce, but looks like IonicPage don't work over plunker, the error is "Invalid link: First Page".

http://plnkr.co/edit/Puzkvf

Found that this isn't a bug. As explained by @ChezRD on #11703, the PageModule and Page should NOT be declared on our top component (AppComponent).

I've read the docs many times to find something that I was doing wrong, and didn't found. The documentation isn't clear about it: @IonicPage is a form to LazyLoad the pages.

I really think that the documentation should be clearer about this functionality, since as @ChezRD said, many issues was opened about this.

Hello, thanks for using Ionic! This is something that we are already tracking and are currently working on a fix that should be in the next release.

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Nick-The-Uncharted picture Nick-The-Uncharted  路  3Comments

alan-agius4 picture alan-agius4  路  3Comments

brandyscarney picture brandyscarney  路  3Comments

danbucholtz picture danbucholtz  路  3Comments

brandyscarney picture brandyscarney  路  3Comments