9

I'm working on an Ionic 4 project, I've generated a tabs project.

What I want to do is create a Login page which is the default page.

When a user has signed in successfully I want to navigate to the tabs.

When I'm trying to do this I get the error:

Error: Cannot match any routes. URL Segment: 'tabs'

These are my routes:

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

In my Login Page I have a button as follows:

<ion-button expand="block" [href]="'tabs'" color="light" fill="outline">Sign in</ion-button>

When I generate a different page I am able to navigate to this page using the same way.

2
  • can you try using angular router? it would be something like this: <ion-button routerLink="/login"> Sign in </ion-button>
    – nimzz
    Oct 1, 2018 at 10:27
  • Hi, thank you for your reply. Tried, but same error. The navigation also has to happen in the typescript. Validate the input, do a request and so on. But it says that it can't find the route...
    – Robin.v
    Oct 1, 2018 at 14:12

3 Answers 3

9

I was facing the same issue. I found a solution here. You need to add an additional route to your routes array.

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

Step 1 : Add an additional route to tabs page in your app-routing.module.ts

{ path: 'app', loadChildren: './pages/tabs/tabs.module#TabsPageModule' }

Step 2 : Add the tabs route inside the tabs-routing.module.ts

 const routes: Routes =[
   {
     path:'tabs',
     component:TabsPage,
     children:[
       {
         path : 'home',
         outlet : 'home',
         component : HomePage
       },
       {
         path : 'me',
         outlet : 'me',
         component : MePage
       }
     ]
   }
 ];

Step 3 : Link to the tabs page

 <ion-button href="app/tabs/(home:home)" routerDirection='root'>Tabs</ion-button>
0

I faced the same issue. My first page is 'Sign In' page by default. I wanted to navigate to tabs module after button click.

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
   { path: 'app', loadChildren: './tabs/tabs.module#TabsPageModule' },
   { path: '', loadChildren: './sign-in/sign-in.module#SignInPageModule' },
  { path: 'search', loadChildren: './search/search.module#SearchPageModule' }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

tabs.router.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        children: [
          {
            path: '',
            loadChildren: '../home/home.module#HomePageModule'
          }
        ]
      },
      {
        path: 'my-requests',
        children: [
          {
            path: '',
            loadChildren: '../my-requests/my-requests.module#MyRequestPageModule'
          }
        ]
      },
      {
        path: 'add-request',
        children: [
          {
            path: '',
            loadChildren: '../add-request/add-request.module#AddRequestPageModule'
          }
        ]
      },
      {
        path: 'search',
        children: [
          {
            path: '',
            loadChildren: '../search/search.module#SearchPageModule'
          }
        ]
      },
      {
        path: 'profile',
        children: [
          {
            path: '',
            loadChildren: '../profile/profile.module#ProfilePageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/home',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/home',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

sign-in.module.ts:

....

const routes: Routes = [
  {
    path: "",
    component: SignInPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [SignInPage]
})

....

sign-in.page.html:

 <ion-button (click)="navigateToProfile()">Sign In</ion-button>

sign-in.page.ts:

navigateToProfile(){
  this.navController.navigateRoot(`app/tabs/home`);
  }

Overall, my solution was:

  • adding one more path: 'app' in my root module app-routing.module
  • navigating to root with route with NavController. See here for more details, I found it here.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.