Ionic 4 redirect to tabs page

Ionic Framework
1

I have created a standard tabs app using the command: ionic start tabs tabs --type=angular

Next I modify routes app-routing.modules from:

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

to:

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

If I run ‘ionic serve’ I get the following error message:
ERROR Error: “[object Object]”
resolvePromise8Angular

Why?

1 Like
2

I tried this and I get however:

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

And that is because the TabsPageModule has no empty route. So either redirect to the desired path inside the TabsPageModule:

    { path: '', redirectTo: 'tabs/tabs/tab1', pathMatch: 'full' },
    { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' }

Or add an empty path in tabs.router.module.ts:

app-routing.module.ts

    { path: '', redirectTo: 'tabs', pathMatch: 'full' },
    { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' }

tabs.router.module.ts

    { path: '', redirectTo: 'tabs/tab1', pathMatch: 'full' },
    {
        path: 'tabs',
        component: TabsPage,
        children: [
            {
                path: 'tab1',
...

Regards,
Norbert

2 Likes
3

Hi @nharrer,

Have you tried redirecting to /tabs/tab1 (with a slash at the beginning)?

Best,
Rodrigo

4

Thanks for your reply. Your first suggestion works, i.e. changing routes in app-routing.modules to:

const routes: Routes = [
{ path: ‘’, redirectTo: ‘tabs/tabs/tab1’, pathMatch: ‘full’ },
{ path: ‘tabs’, loadChildren: ‘./tabs/tabs.module#TabsPageModule’ }
];

Regarding your second suggestion (adding an empty path in tabs.router.module):
The file tabs.router.module as generated by the ‘ionic start’ command already contains the empty path that you suggest, at the bottom of the routes array. I moved it to the top but that did not help either.

As a side note: the error message that you got is way more helpful than mine. That made me try Chrome instead of Firefox, which indeed gives me the same error message as you got.

5

Redirecting to ‘/tabs/tab1’ does not work, but redirecting to ‘tabs/tabs/tab1’ does, as suggested by nharrer.

1 Like
6

Ah, you are right. I didn’t notice that. There is a tiny difference however. The generated code redirects absolutely to /tabs/tab1 which is not correct in this case anymore, since you moved everything up one directory. You have to remove the leading slash: redirectTo: 'tabs/tab1', to make it relative to the current location.

I think it is a bad choice in the starter template, because redirects stop working if the child module is placed somewhere else other then the root path. So I opened and issue here: avoid absolute redirects to root path in child module.

Indeed, just tried it in FF. Chrome FTW :smile:

7

A subtle difference indeed (the absolute redirect). Now it works as expected, many thanks for finding out!

8

It didn’t work for me.
Could you please help me out here?