setRoot(string,...) not working, but setRoot(component,...) does?

Just upgraded to Ionic 3.0.0. Before the upgrade, I saw this issue sometimes, but it was limited to spots where I could easily just pass the component instead of a string, so I did. Now, it is affecting my main navigation, so it would take a lot of time to replace all my strings with components.

<ion-segment-button *ngFor="let page of pages"
	[value]="page.value">{{ }}</ion-segment-button>

The selectPage gets passed the page.value in the $event object:

public selectPage(event: any) {
	if (event !== null) {
		this.navCtrl.setRoot(event.value, this.params);
		// push gets the same error
		//this.navCtrl.push(event.value, this.params);

This worked fine pre-3.0.0 when my page object had a value of 'DashboardPage'. Now, 'DashboardPage' causes the error:

ERROR Error: Uncaught (in promise): invalid link: DashboardPage
at g (polyfills.js:3)
at l (polyfills.js:3)
at l (polyfills.js:3)
at polyfills.js:3
at t.invokeTask (polyfills.js:3)
at Object.onInvokeTask (core.es5.js:4136)
at t.invokeTask (polyfills.js:3)
at n.runTask (polyfills.js:3)
at a (polyfills.js:3)
at HTMLElement.invoke (polyfills.js:3)

System information:

 ordova CLI: 6.5.0
Ionic Framework Version: 3.0.0
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.8.0
Xcode version: Not installed

Yes, the C in Cordova still doesn’t show up for some reason. :wink:

If I replace 'DashboardPage' with DashboardPage, it works fine. But the documentation for setRoot says that I should be able to pass in a string for the page. Is there some way I can stick with strings here?

I have the same issue with navCtrl.push(string, ...).

I’m surprised that this ever worked, but AFAIK if you want to navigate using strings now, you need to opt in to the entire IonicPageModule lazy loading stuff.

1 Like

I figured it out. I can leave them as strings. :tada: The string has to match the page name in the DeepLinkConfig (or @IonicPage now, apparently). My pages have names that don’t match the page component name.

export const deepLinkConfig: DeepLinkConfig = {
  links: [
    { component: DashboardPage, name: 'Dashboard', segment: ':type/:id/dashboard' },

I was using ‘DashboardPage’ when I should have been using ‘Dashboard’. :no_good:

Once I changed the event.value above to be ‘Dashboard’ instead of ‘DashboardPage’, it works fine. Still confused as to why setRoot() and push() used to work with the component name stringified, but all better now.

It does still work in DeepLinkConfig for me, but I will move to @IonicPage because that makes more sense.

1 Like