[英]Angular Routing Error: Cannot match any routes
I'm trying to implement lazy loading in my angular application.我正在尝试在我的 angular 应用程序中实现延迟加载。 I have segregated my application into two components;
我已将我的应用程序分为两个部分; an authentication module and a home module.
认证模块和主页模块。 I've defined my routes in the app-routing.Module.ts as follows:
我在 app-routing.Module.ts 中定义了我的路由,如下所示:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: '',
redirectTo: '/authentication/signin',
pathMatch: 'full'
},
{
path: '',
children: [
{
path: 'authentication',
loadChildren: () => import('./modules/authentication/authentication.module').then(m => m.AuthenticationModule)
},
{
path: 'home',
loadChildren: () => import('./modules/home/home.module').then(m => m.HomeModule)
}
]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Then in the authentication as well as home modules, I have defined yet another set of routes,然后在身份验证和主页模块中,我定义了另一组路由,
authentication.module.ts:身份验证.module.ts:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { SignupComponent } from './signup/signup.component';
import { SigninComponent } from './signin/signin.component';
import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
import { SharedModule } from '../shared/shared.module';
export const authenticationRoutes = [
{
path: '',
redirectTo: 'signup',
pathMatch: 'full'
},
{
path: 'signin',
component: SigninComponent
},
{
path: 'signup',
component: SignupComponent
},
{
path: 'forgot-password',
component: ForgotPasswordComponent
}
];
@NgModule({
declarations: [
SignupComponent,
SigninComponent,
ForgotPasswordComponent
],
imports: [
CommonModule,
SharedModule,
RouterModule.forChild(authenticationRoutes)
]
})
export class AuthenticationModule { }
home.module.ts:家.module.ts:
import { HomeComponent } from './home/home.component';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
export const authenticationRoutes = [
{
path: 'home',
component: HomeComponent
}
];
@NgModule({
declarations: [],
imports: [
CommonModule
]
})
export class HomeModule { }
With this, whenever I try to execute my code, I expect an empty URL to redirect me to signup, however whether I specify a route or not, I end up getting the same error, one that states:有了这个,每当我尝试执行我的代码时,我都希望一个空的 URL 将我重定向到注册,但是无论我是否指定路由,我最终都会遇到相同的错误,其中指出:
ERROR Error: Uncaught (in promise): Error: Cannot match any routes.
错误错误:未捕获(承诺):错误:无法匹配任何路线。 URL Segment: 'authentication/signin' Error: Cannot match any routes.
URL 段:“身份验证/登录”错误:无法匹配任何路由。 URL Segment: 'authentication/signin'
URL 段:'身份验证/登录'
How do I fix this issue?我该如何解决这个问题?
You have an issue in the app-routing-module.您在应用程序路由模块中遇到问题。 When checking for a matching path both the paths have blank and since you have given first to redirect when the path is blank the app never reaches any other path.
在检查匹配路径时,两条路径都是空白的,并且由于您首先在路径为空白时重定向,因此应用程序永远不会到达任何其他路径。 Best way is to not specify the authentication and home modules as children and reroute to authentication on seeing path 'authentication' like below
最好的方法是不将身份验证和主页模块指定为子模块,并在看到路径“身份验证”时重新路由到身份验证,如下所示
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: 'authentication',
loadChildren: () => import('./modules/authentication/authentication.module').then(m => m.AuthenticationModule)
},
{
path: 'home',
loadChildren: () => import('./modules/home/home.module').then(m => m.HomeModule)
},
{
path: '**', //If path doesn't match anything reroute to /authentication/signin
redirectTo: '/authentication/signin',
pathMatch: 'full'
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.