NavPush string not working


NavPush documentation suggests it takes a Page component or a string as a valid value. It does not take a string. I can see in the source that it goes down to getComponent which takes a string value, but tracing it in chrome dev tools gets to a point where it tries to identify the string in a list of links which is empty. Why does this not work? This is important on a page that has it’s own nav component, and I need to send it the page it should begin on when navigating to it dynamically.

It yields this error “invalid page component: stringValueIPassed”


Are you passing a deeplink name?


Can you post your code? It think it is an simple mistake :slight_smile:


There must be a module somewhere that imports IonicPageModule.forChild(FooPage) in order for nav.push('FooPage') to work.


I am passing the name of the page component, which I assumed (the documentation does not specify) would work and the source seems to imply when it uses the variable name “nameOrPageOrView” as it passes through the whole component-retrieval process. Is this different than a deeplink name?

For instance, this does not work:

Alternatively this is what I was trying, where innerNav is a ViewChild reference to the <ion-nav> element within this page (the sub navigation structure):

@rapropos, sorry, I’m not familiar enough with ionic2 yet to understand that :slight_smile: Is IonicPageModule what creates the internal links necessary for push to recognize strings as loaded components? I did some research on it in this 10-minute forced delay I have to endure to post. Why do I need to load pages that way? Is this to just differentiate between the declarations: [] array pages vs. components?


page Page|string The component class or deeplink name you want to push onto the navigation stack.


That’s part of what it does. The other is creating a separate code chunk for each page it’s called for and getting the navigation system to be able to load it on demand when presented with a string.

I’m deliberately using the word “page” here and not “component”. I realize that Angular doesn’t see a difference, but IMHO Ionic does, and this is one place where it really matters. Pages can be lazy loaded. Components can’t. (Or at least I couldn’t figure out how to get them to). The navigation system deals with pages, not components. Pages can include components. Components can include other components. Pages cannot (or at the least “should not”) include other pages.

Incidentally, passing strings to the navigation system (and therefore opting in to the whole lazy page loading structure) is not required just to be able to do dynamic navigation:

It should be possible to pass a constructor function (aka naked class name) here anywhere you are trying to use strings if you wish to keep all your pages in a single app module / code chunk.


@rapropos can you point to a working example that is using IonicPageModule and IonicPage for pages? I’ve been completely unsuccessful getting navigation to work by the names provided in @ IonicPage

I have create a module for each of my pages
Imported the modules in app.module
Marked each page as Declaration and entryComponent in their respective modules

But if I try navCtrl.push(‘my-page-name’), it fails here: with an ‘undefined is not a function’ which appears to be because the result of System.import() is not a promise. It’s hard to tell beyond that because the “exports” on the module that System.import targets shows as a webPackAsyncContext

I started a topic on this here:


@mhartington dropped star-track in the initial lazy loading monster thread. That’s probably the best I know of. I had it “working” for a while, but decided that for my situation until the code duplication stuff gets worked out, the whole lazy page loading thing was turning out to be a net lose for me.

Does anyone have a working example of using the new @IonicPage for URL routing (Deeplinking)?

Thanks @rapropos. Got it…I was importing the to-be-lazy-loaded modules in my appModule, causing the loader to get confused. I forget the “magic” the build process and the angular compiler.

I’m still not settled on this myself, but if we use Ionic for both Mobile and Browser based, we have to have the URL changing, and this seems like the way to make that happen with Ionic.


@rapropos Is there an ongoing discussion/issue somewhere I can read about the code duplication issues you’re describing? It seems so far in my testing that the page modules can import other sibling modules to share services/components just like any other angular app designed with multiple modules. I’ve only started down the path, so I’m interested if there’s a point at which I’m going to be fighting the same fight you’re alluding too.



We actually end up talking about it more in depth in another thread I started. It’s an issue with the webpack code splitting, and the fact that plugins we don’t have control over (at least not directly) control which file (ionic/angular/node_modules) imports are considered for code splitting. The recommendation in the lazy loading doc on Google Docs suggests have a components.module.ts where all components are declared, and then this aggregate file included in every lazy-loaded page’s module.ts which leads to duplicating the components.module.ts in each page’s module.ts compiled output.


I ended up here because I had the exact same problem - I commented out the various PageModules from app.module’s imports, and hey presto things Magically Worked.

However, this seems like a bigger problem for me, as I no longer feel confident that I understand the Magic that Ionic is doing here. If the entry point for my javascript is main.js, and that never mentions pages/foo/foo.module.js, how is that file loaded and parsed and available when I do nav.push('foo')?

I mean, it works fine. It just doesn’t make any sense - is there somewhere I can actually read the webpack config files that are generated for the ionic CLI and angular compilers?

What I’m used to is putting everything in main.js (or somewhere below that). This ends up being hard for tree-shaking, right? Like if I don’t actually ever use a page, it shouldn’t be part of the build. But you don’t know I never used it because I never referred to it by its @IonicPage({name: string}) name, I think.


It’s a combination of app-scripts and this loader in the framework.