Cannot match any routes. URL Segment: 'auth/login'

I'm new to Angular, and I've been dealing with the routing of my first project. I'm having trouble once I try to access my login page and I come across the error Cannot match any routes. URL Segment: 'auth/login'.

My folder structure look like this:

app
 |
 +-- web
 |  |   
 |  +-- account
 |  +-- auth
 |  |   |
 |  |   +-forgot-password
 |  |   +-login
 |  |   +-register
 |  |   +-reset-password
 |  +-- auth-routing.module.ts
 |  +-- auth-module.ts
 +-- app-routing.module.ts
 +-- app-module.ts

The browser just displays the message app component works! that is generated automatically once you create a component but doesn't even show the message auth works! that is found in the auth folder.

app-routing.module:

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

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./web/auth/auth.module').then(m => m.AuthModule)
  },
  {
    path: 'account',
    loadChildren: () => import('./web/account/account.module').then(m => m.AccountModule)
  }
];

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

app.component.html:

<p>app component works!</p>
<router-outlet></router-outlet>

auth-routing.module:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
import { ResetPasswordComponent } from './reset-password/reset-password.component';

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent },
  { path: 'forgot-password', component: ForgotPasswordComponent },
  { path: 'reset-password', component: ResetPasswordComponent },
  {
    path: '**', redirectTo: 'login'
  }
];

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

auth.component.html:

<p>auth works!</p>
<router-outlet></router-outlet>

I've tried to change the order of paths and adding the empty and the wildcard route without much success.

Update your routes array in app-routing.module.ts with below array.

const routes: Routes = [
      {
        path: '',
        redirectTo: 'auth',
        pathMatch: 'full'
      },
      {
        path: 'auth',
        loadChildren: () => import('./web/auth/auth.module').then(m => m.AuthModule)
      },
      {
        path: 'account',
        loadChildren: () => import('./web/account/account.module').then(m => m.AccountModule)
      }
    ];

Update your routes array in auth-routing.module.ts to below array

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' }
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent },
  { path: 'forgot-password', component: ForgotPasswordComponent },
  { path: 'reset-password', component: ResetPasswordComponent },
  {
    path: '**', redirectTo: 'login'
  }
];

Thanks!

Just add auth in app.routing.ts

const routes: Routes = [
      {
        path: '',
        redirectTo: 'auth',
        pathMatch: 'full'
      },
      {
        path: 'auth',
        loadChildren: () => import('./web/auth/auth.module').then(m => m.AuthModule)
      },
      {
        path: 'account',
        loadChildren: () => import('./web/account/account.module').then(m => m.AccountModule)
      }
    ];