Angular 模块路由 - 不是路由

Question

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

错误错误：未捕获（承诺）：错误：无法匹配任何路由。 URL 段：'login-admin/admin-dashboard' 错误：无法匹配任何路由。 URL 段：'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

您已经两次声明了根路由 ( '' )，这对于 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'
  }

];

让我们改变它

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+，则需要改用以下导入语句。

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 。

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