Не удается сопоставить маршруты администратора в Angular 9

У меня есть 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.');
    }
  }
}

Приложение.

@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 { }

Я перепробовал все, что мог представить: импорт, экспорт, объявление ... ничего не работает. Когда я нажимаю ссылку администратора (при входе в систему), система не распознает маршруты, поэтому она дает мне логин, потому что это так называемая подстановочная карта ...


angular angular-routing angular-module
person Mellville    schedule 26.05.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

У него были некоторые модули в общем модуле, которые вызывали дублирующийся импорт,

Как HttpClientModule, AdminModule и т. Д.

Импорт был испорчен. Когда-то импорт был в нужном месте. Это было круто, и админ-модуль был перенесен как ленивый модуль.

И я реализовал то же самое, что объяснил Жером Гриньон в его проекте. И все работало нормально.

person Aakash Garg    schedule 26.05.2020

arrow_upward
3
arrow_downward

Использование RouterModule.forChild() сообщает вашему AdminModule, как он будет обрабатывать маршрутизацию для своих компонентов, но вам необходимо связаться с родительским маршрутизатором, RouterModule.forRoot() объявленным здесь в AppModule.

Объявите основной маршрут для функции администратора вашего приложения в массиве routes вашего AppRoutingModule ('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] },
];

И удалите RouterModule.forChild([]) из массива import вашего AdminModule.

person Gérôme Grignon    schedule 26.05.2020
comment
как сказал Аакаш, это правильный ответ, но я должен принять ответ Аакаша, потому что он показал мне то же самое, а также увидел другие проблемы. Спасибо вам обоим! - person Mellville; 26.05.2020