Routing from Default Route to Tabs Page

Ionic Framework
1

I recently created a frontend project with Ionic 4 and Angular 7 to learn the changes from NavController to Angular routing. The initial project from calling ionic start was a tabs project, but I created a blank page through ionic generate called Login. In the initial app-routing.module.ts file, the routes array had a blank path leading to the tabs page.

const routes: Routes = [{ path: '', loadChildren: './tabs/tabs.module#TabsPageModule }];

I changed that blank path to route to the login page instead, and created a separate path called ‘tabs’ to route to the original tabs section.

const routes: Routes = [{ path: '', redirectTo: 'login', pathMatch: 'full'},
{ path: 'tabs', loadChildren: '/tabs/tabs.module#TabsPageModule' },
{ path: 'login', loadChildren: '/login/login.module#LoginPageModule }
];

However, after launching the app to the login page, I tried to change the URL to /tabs but the app loaded nothing. I’m wondering what could be causing this lack of page rendering as a result of my changing the routes.

Thanks in advance for any help.

2

Can you post the routing and related code?

3

Yeah, I just added my code. Sorry in advance for the bad formatting; this is my first time posting pre-formatted text as code in a forum post.

4

No worries. You should add the code you’re using to route from login to tabs as well

5

Well, my understanding is that by changing the route directly in the url (i.e. localhost:4200/login to localhost:4200/tabs), it should allow the reroute from the login page to the tabs section. If I am wrong, please correct me.

6

Can you show how you’re doing it?

this.router.navigate(['tabs']);
Or
this.router.navigateByUrl('/tabs');
?

You could try a route guard on the tabs page also

7

I don’t have a this.router.navigate setup at the moment, only manually changing the route in the url in the search bar.

8

ah ok I see. Try putting the redirect lastin the array, sometimes that helps with the way the router checks the path