Question

我对角度路由和延迟加载模块非常陌生。

错误错误：未捕获（承诺）：错误：无法匹配任何路由。网址段：“ login-admin / admin-dashboard” 错误：无法匹配任何路线。网址段：“ login-admin / admin-dashboard”

我不知道哪里出错了。

应用模块

@NgModule({
  declarations: [
    AppComponent,
    SignupAdminComponent,
    HeadersComponent,
    LoginAdminComponent
  ],
 bootstrap: [AppComponent]

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

@NgModule({
  declarations: [
    AdminDashboardComponent,
    SideBarComponent,
  ],
  imports: [
    CommonModule,
    NbLayoutModule,
    NbSidebarModule,
    NbButtonModule,
    RouterModule.forChild(AdminRoutes)
  ],
  exports: [  ]
})
export class AdminRoutingModule { }

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 },

];

Answer 1

有些事情是错误的。

据我对您的代码的了解，您希望实现以下目标：

您想要一个AdminModule并将所有以/login-admin开头的路由委托给该模块。 AdminModule从那里开始接管并创建内部路线。

基于此，您需要在代码中编辑以下部分

app-routing.module

您已经两次声明了根路由（''），这对于角度而言是令人困惑的，并试图定义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'
  }

];

让我们更改它

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}
];

另外，如果您使用angular v8 +，则需要使用以下import语句。

loadChildren: () => import('./components/dashboards/admin-dashboard/admin-routing.module').then(m => m.AdminRoutingModule)

通过此设置，我们将以login-admin开头的所有路由委派给AdminRoutingModule。

让我们修复AdminRoutingModule

同样，您两次声明了路线''。只需删除第一个。

export const AdminRoutes: Routes = [                                 
   { path: '', redirectTo: 'admin-dashboard', pathMatch: 'full' },
   { path: 'admin-dashboard', component: AdminDashboardComponent },
];

Answer 2

发生此错误是因为您尝试访问不存在的路由。

您尝试访问的路由为login-admin/admin-dashboard，并且该路径不存在。

您必须访问login-admin才能获得名为LoginComponent的组件的视图。

如果您要访问AdminDashboardComponent，则只需访问admin-dashboard。

它们是两条不同的路线，并且没有嵌套。

角模块路由-不路由

2 个答案: