无法匹配 Angular 9 中的任何管理路由答案

【问题标题】：Can't match any admin routes in Angular 9无法匹配 Angular 9 中的任何管理路由
【发布时间】：2020-05-27 00:44:15
【问题描述】：

我有 3 个模块：App、Shared、Core 和 Admin 这是根对象：

export const routes: Routes = [
  {path:'home', component:HomeComponent, canActivate:[AuthGuardService]},
  {path:'detail/:id', component:DetailComponent},
  {path: 'register', component: RegisterComponent},
  {path:'login', component: LoginComponent},
  {path:'', redirectTo:'login', pathMatch: 'full'},
  {path:'**', pathMatch: 'full' ,redirectTo:'login'}

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

核心模块，所有主要组件声明在哪里，所以这就像我的主模块，我在这里导入 appRoutingModule：

@NgModule({
  declarations: [
    HomeComponent, 
    DetailComponent, 
    RegisterComponent, 
    LoginComponent, 
    NavbarComponent
  ],
  imports: [
    SharedModule,
    AppRoutingModule,
    AdminModule    

  ],
  exports:[AppRoutingModule, NavbarComponent]
})
export class CoreModule {
//para evitar que este modulo seja importado mais que uma vez
  constructor( @Optional() @SkipSelf() parentModule: CoreModule) {
    if (parentModule) {
      throw new Error('CoreModule has already been loaded. You should only import Core modules in the AppModule only.');
    }
  }
}

app.Module

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    SharedModule,
    CoreModule,
    AdminModule
  ],
  providers: [
    DataService, 
    fakeBackendProvider, 
    AuthService, 
    AuthGuardService, 
    ShoppingCartService 
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

最后，管理模块和它的路由文件

@NgModule({
  imports: [
    SharedModule,
    AdminRoutingModule
    RouterModule.forChild([])
    ],
    declarations: [AdminComponent],

  exports:[AdminComponent],
  providers:[AuthGuardService]
})
export class AdminModule { }

这是管理路由的配置文件：

export const adminRoutes: Routes = [
  {path:'admin', component:AdminComponent , canActivate:[AuthGuardService] },


];

@NgModule({
  imports: [RouterModule.forChild(adminRoutes)],
  exports: [RouterModule]
})
export class AdminRoutingModule { }

我已经尝试了我能想象到的一切，导入、导出、声明……没有任何效果。当我点击 Admin 链接（登录时）时，系统无法识别路线，所以它给了我登录，因为那是所谓的通配符...

【问题讨论】：

标签： angular angular-routing angular-module

【解决方案1】：

使用RouterModule.forChild() 告诉您的 AdminModule 它将如何处理其组件的路由，但您需要与父路由器通信，RouterModule.forRoot() 在此处的 AppModule 中声明。

在 AppRoutingModule 的 routes 数组中声明应用的管理功能的主要路由（'loadChildren' 将允许您在 AdminModule 上启用延迟加载）：

export const routes: Routes = [
  {path:'home', component:HomeComponent, canActivate:[AuthGuardService]},
  {path:'detail/:id', component:DetailComponent},
  {path: 'register', component: RegisterComponent},
  {path:'login', component: LoginComponent},
  {path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)},
  {path:'', redirectTo:'login', pathMatch: 'full'},
  {path:'**', pathMatch: 'full' ,redirectTo:'login'}

];

将您的 adminRoutes 更新为空路径，因为在 AppRoutingModule 路由中声明了“admin”段（因为您不想路由到 admin/admin）：

export const adminRoutes: Routes = [
  {path:'', component:AdminComponent , canActivate:[AuthGuardService] },
];

并从 AdminModule 的 imports 数组中删除 RouterModule.forChild([])。

【讨论】：

正如 Aakash 所说，这个答案是正确的，但我必须接受 Aakash 的答案，因为他以同样的方式向我展示了其他问题。谢谢你们！

【解决方案2】：

他在共享模块中有一些模块导致重复导入，

如 HttpClientModule、AdminModule 等

进口混乱。一旦进口到位。它很酷，并将管理模块作为延迟加载模块移动。

我实施了 Gérôme Grignon 在他的项目中解释的相同内容。而且效果很好。

【讨论】：