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

Question

我有 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 link（登录时），系统无法识别路由，所以它给了我登录名，因为这就是所谓的通配符...

Answer 1

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

像 HttpClientModule、AdminModule 等

进口被搞砸了。一旦进口到位。很酷，将 Admin 模块移动为延迟加载模块。

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

Answer 2

使用 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 更新为空路径，因为 'admin' 段是在 AppRoutingModule 路由内声明的（因为您不想路由到 admin/admin）：

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

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

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

Can't match any admin routes in Angular 9

angular

angular-routing

angular-module