Routing Problem to another view

Ionic Framework Ionic Angular
1

Hello,

I have a problem by making an app with Login Page. I want to route from the Login Page to a Tabs Page.

I get the following error:
Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ‘tabs/tab1’ noMatchError@http://localhost:8100/vendor.js:93839:25

In the login.page.ts (it is below) i made the navigation to the Tabs Page.
I tried a lot of problem solutions from google, ionic forum, etc. but none solve my problem.

Can someone help me please?

Thanks,
Fabian

This is my app-routing-module.ts:

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

const routes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },{
    path: 'login',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
  },{
    path: 'tabs',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

This is my tabs-routing.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: 'tab1',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab1/tab1.module').then(m => m.Tab1PageModule)
          }
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab2/tab2.module').then(m => m.Tab2PageModule)
          }
        ]
      },
      {
        path: 'tab3',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab3/tab3.module').then(m => m.Tab3PageModule)
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

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

This is my login.page.html:

<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>login</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>

        <ion-item>
            <ion-label>Username</ion-label>
            <ion-input type="text" [(ngModel)]="username"></ion-input>
        </ion-item>
        <ion-item>
          <ion-label>Password</ion-label>
          <ion-input type="password" [(ngModel)]="password"></ion-input>
      </ion-item>

    </ion-list>

    <ion-button fill="solid" color="dark" (click)="login()">Login</ion-button>
  </ion-content>
</ion-app>

And finally my login.page.ts:

import { Component } from '@angular/core';
import { Router } from "@angular/router";

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage {

  constructor(private router: Router) {}

  login(){
    this.router.navigateByUrl('/tabs') {
  }

}
2

The Problem is that in the main Routing you route tabs to the Tabs Page and in this Routing you use tabs again as main. So the Path get’s to tabs/tabs/tab1. You can set path: '' in the tabs-routing.module.ts for the parent Component.