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.
CodePudding user response:
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!
CodePudding user response:
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)
}
];