[英]Angular modules routing - not routing
I very new to angular routing and lazy loading modules.我对角度路由和延迟加载模块非常陌生。
ERROR Error: Uncaught (in promise): Error: Cannot match any routes.错误错误:未捕获(承诺):错误:无法匹配任何路由。 URL Segment: 'login-admin/admin-dashboard' Error: Cannot match any routes. URL 段:'login-admin/admin-dashboard' 错误:无法匹配任何路由。 URL Segment: 'login-admin/admin-dashboard' URL 段:'login-admin/admin-dashboard'
I don' know where I'm getting the error tho.我不知道我在哪里收到错误。
App Module应用模块
@NgModule({
declarations: [
AppComponent,
SignupAdminComponent,
HeadersComponent,
LoginAdminComponent
],
bootstrap: [AppComponent]
App.Routing.ts App.Routing.ts
const routes: Routes = [
{ path: '', redirectTo: '/login-admin', pathMatch: 'full'},
{ path: 'login-admin', component: LoginAdminComponent},
{ path: 'sigup-admin', component: SignupAdminComponent},
{ path: '',
loadChildren: './components/dashboards/admin-dashboard/admin-routing.module#AdminRoutingModule'
}
];
@NgModule({
declarations: [],
imports: [
CommonModule,
RouterModule.forRoot(routes),
// AdminDashboardModule
]
})
export class AppRoutingModule { }
admin-routing.module.ts admin-routing.module.ts
@NgModule({
declarations: [
AdminDashboardComponent,
SideBarComponent,
],
imports: [
CommonModule,
NbLayoutModule,
NbSidebarModule,
NbButtonModule,
RouterModule.forChild(AdminRoutes)
],
exports: [ ]
})
export class AdminRoutingModule { }
admin-routing.ts admin-routing.ts
import { Routes } from '@angular/router';
import { AdminDashboardComponent } from './admin-dashboard.component';
import { LoginAdminComponent } from '../../accounts/admin/login-admin/login-admin.component';
import { SideBarComponent } from './side-bar/side-bar.component';
import { ExtenstionAgentComponent } from './extenstion-agent/extenstion-agent.component';
export const AdminRoutes: Routes = [
{
path: '', component: AdminDashboardComponent},
{ path: '', redirectTo: 'admin-dashboard', pathMatch: 'full' },
{ path: 'admin-dashboard', component: AdminDashboardComponent },
];
There are couple of things that are wrong as is.有几件事是错误的。
As far as I understood from your code, you want to achieve something like following:据我从您的代码中了解到,您希望实现以下目标:
You want to have an AdminModule
and delegate all of the routes starting with /login-admin
to that module.您希望拥有一个AdminModule
并将所有以/login-admin
开头的路由委托给该模块。 From there, AdminModule
will take over and create inner routes.从那里, AdminModule
将接管并创建内部路由。
Based on this, you need to edit following parts within your code基于此,您需要在代码中编辑以下部分
app-routing.module
You have declared the root route ( ''
) twice which is confusing for angular and tried to define login-admin
route to LoginAdminComponent
which is AdminModule
's job.您已经两次声明了根路由 ( ''
),这对于 angular 来说是令人困惑的,并试图将login-admin
路由定义为LoginAdminComponent
,这是AdminModule
的工作。
const routes: Routes = [
{ path: '', redirectTo: '/login-admin', pathMatch: 'full'},
{ path: 'login-admin', component: LoginAdminComponent},
{ path: 'sigup-admin', component: SignupAdminComponent},
{ path: '',
loadChildren: './components/dashboards/admin-dashboard/admin-routing.module#AdminRoutingModule'
}
];
Let's change it让我们改变它
const routes: Routes = [
{ path: '', redirectTo: '/login-admin', pathMatch: 'full'},
{ path: 'login-admin',
loadChildren: './components/dashboards/admin-dashboard/admin-routing.module#AdminRoutingModule'},
{ path: 'sigup-admin', component: SignupAdminComponent}
];
Also if you use angular v8+, you need to use following import statement instead.此外,如果您使用 angular v8+,则需要改用以下导入语句。
loadChildren: () => import('./components/dashboards/admin-dashboard/admin-routing.module').then(m => m.AdminRoutingModule)
With this setup, we delegate every route that starts with login-admin
to AdminRoutingModule
.通过此设置,我们将每个以login-admin
开头的路由委托给AdminRoutingModule
。
Let's fix AdminRoutingModule
让我们修复AdminRoutingModule
Again you declared the route ''
twice.您再次声明了路线''
两次。 Just delete the first one.删除第一个就行了。
export const AdminRoutes: Routes = [
{ path: '', redirectTo: 'admin-dashboard', pathMatch: 'full' },
{ path: 'admin-dashboard', component: AdminDashboardComponent },
];
The error occurs because you are trying to access a route that doesn't exist.发生错误是因为您尝试访问不存在的路由。
The route that you are trying to access is login-admin/admin-dashboard
and that path doesn't exist.您尝试访问的路由是login-admin/admin-dashboard
并且该路径不存在。
You have to access login-admin
in order to get the view with the component called LoginComponent
.您必须访问login-admin
才能使用名为LoginComponent
的组件获取视图。
If you want to access AdminDashboardComponent
you need to access only admin-dashboard
.如果您想访问AdminDashboardComponent
您只需要访问admin-dashboard
。
They are two different routes and they aren't nested.它们是两条不同的路线,并且它们不是嵌套的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.