Navigation Changes

One of the major changes in Ionic V4 is the routing, and there are some decisions to make about how to replace the NavController-functionlity in V3.

I decided to stay on NavController in V4 and replacing my navCtrl.push() and navCtrl.pop() with GoForward() and GoBack() and I can do some navigation, but trying to navigate to my TabsPage I fail miserable

I am using

navnCtrl.goRoot(‘tabs’)

and in my app-routing.module.ts I have the following line

{ path: ‘tabs’, loadChildren: ‘./tabs/tabs.module#TabsPageModule’ },

in Routes

but getting the error

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ‘tabs’
Error: Cannot match any routes. URL Segment: ‘tabs’
at ApplyRedirects.push…/node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1382)

is my config wrong or am I missing to add something?

Are you sure that is going to be supported in the final release? I haven’t seen verification of this.

Why change signatures on NavContoller at let it wrap the underlaying router if it is not supported?

I think it is something with visibility of the router table as I have seen the same error for ‘home’ if doing some forward and back navigation

I have recreated the problem using the starter template

Generate a new project based on tabs-template

ionic start ionic4demo tabs --type=angular

build the app and verify you can switch between tabs

generate 2 new pages

ionic generate page login
ionic generate page signup

Change app-routing.module, so the default page is login

const routes: Routes = [
{ path: ‘tabs’, loadChildren: ‘./tabs/tabs.module#TabsPageModule’ },
{ path: ‘’, loadChildren: ‘./login/login.module#LoginPageModule’ },
{ path: ‘signup’, loadChildren: ‘./signup/signup.module#SignupPageModule’ }

add this to login.page.html

<ion-button color=“primary” shape=“round” (click)=“login()”>log in</ion-button>
<ion-button color=“secondary” shape=“round” (click)=“signup()”>sign up</ion-button>

so the start page will be
image

add this in login.page.ts (adding NavController in the constructor)

login() {
this.navCtrl.goRoot(‘tabs’);
}
signup() {
this.navCtrl.goForward(‘signup’);
}

So basically just build an app with tabs, that require to login og signup before showing tabs as root

You should now have an app, where navigation to signup is fine, thus showing navigation is ok, but navigation to tabs fails.

I have tried:

this.navCtrl.goRoot('tabs');
this.navCtrl.goRoot('/tabs');
this.navCtrl.goRoot('tabs/(home:home)');
this.navCtrl.goRoot('/tabs/(home:home)');

each time getting the error

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ‘tabs’
Error: Cannot match any routes. URL Segment: ‘tabs’

So where am I going wrong?

Reading my topic before posting it, and checking the routes I realized, that the problem could be in tabs.router.module where I changed

path: '',
redirectTo: '/tabs/(home:home)',
pathMatch: 'full'

to

path: 'tabs',
redirectTo: '/tabs/(home:home)',
pathMatch: 'full'

and now I get the homepage shown, but not in the tabs layout.

Anyone got a working example?

The problem is in your app.router.module.

For some odd reason that i couldn’t figure out either (got this solution from analyzing the tabs template), you have to load the tabsmenu on an empty path.

so change your app.routing.module.ts route config to this:

const routes: Routes = [
{ path: 'login', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'signup', loadChildren: './signup/signup.module#SignupPageModule' }
{ path: '', redirectTo: 'login', pathmatch:'full'},
{ path: '', loadChildren: './tabs/tabs.module#TabsPageModule' }, // <--- Important
]

the order is important too, you have to place it at the very bottom because it will match any path and the router selects the page with a first found algorithm

then you can actually navigate to the tabs menu with /tabs

4 Likes

Boom…its working, Thanks!!!:+1::metal: