Angular 'router-outlet‘不是已知元素’

Question

这是一个重复的问题，但由于这个问题是由于许多原因，以前的答案对我没有帮助。我试图将现有的项目拆分成模块，问题出在Unibook组件(以及员工、结构、学生、订单)中，它是新创建的模块的父级，它告诉router-outlet不是一个已知元素。这很奇怪，因为我将路由模块导入到AppModule中。由于unibook组件无法识别路由器插座，因此无法在任何地方导航，因此启动屏幕上的项目卡住了。我意识到unibook组件在一开始就没有加载。App.module.ts：

@NgModule({
  declarations: [
    AppComponent,
    AuthComponent,
    HeaderComponent,
    UniversityAsideComponent,
    UnibookComponent,
    FilterPipe,
    StructuresComponent,
    StructureListComponent,
    StructureMainComponent,
    StructureAboutComponent,
    StructureFacultiesComponent,
    EmployeesComponent,
    EmployeeListComponent,
    EmployeeMainComponent,
    EmployeeCanvasComponent,
    EmployeeAboutComponent,
    EmployeeMainInfoComponent,
    EmployeeContactComponent,
    EmployeeDocumentsComponent,
    EmployeeBiographyComponent,
    StudentsComponent,
    StudentListComponent,
    StudentMainComponent,
    StudentCanvasComponent,
    StudentAboutComponent,
    StudentBiogrpahyComponent,
    StudentContactComponent,
    StudentDocumentsComponent,
    StudentMainInfoComponent,
    SortPipe,
    PopupDirective,
    EmployeeAdvancedFilterComponent,
    StudentAdvancedFilterComponent,
    StudentEducationComponent,
    StudentEducationMainInfoComponent,
    OrdersComponent,
    OrderListComponent,
    OrderMainComponent,
    OrderCanvasComponent,
    StudentBasicFilterComponent,
    EmployeeBasicFilterComponent,
    InputAddressDialogDirective,
    AddressDialogComponent,
    NotFoundComponent,
    EmployeeEducationComponent,
    StructureSpecialitiesComponent,
    StructureDepartmentsComponent,
    ReplaceNbspPipe,
    ActivateInputObservableDirective,
    StudentEducationPlanComponent,
    CustomScrollUpdateDirective
  ],
  entryComponents: [
   AddressDialogComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatSidenavModule,
    MatButtonModule,
    MatRadioModule,
    MatFormFieldModule,
    MatInputModule,
    MatTableModule,
    MatSortModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule,
    ResponsiveModule,
    NgbModule.forRoot(),
    ModalModule.forRoot(),
    PerfectScrollbarModule,
    FormsModule,
    ChartsModule,
    SelectModule,
    FlashMessagesModule,
    OrderModule,
    MatInputModule,
    MatSelectModule,
    MatDatepickerModule,
    MatNativeDateModule,
    ReactiveFormsModule,
    LazyLoadImageModule,
  ],
  providers: [
    AuthService,
    UniversityAsideService,
    StructureService,
    EmployeeService,
    StudentService,
    OrderService,
    DiplomaService,
    AuthGuard,
    SharedService,
    NestedResolver,
    {
      provide: PERFECT_SCROLLBAR_CONFIG,
      useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
    }
  /*  { provide: RouteReuseStrategy, useClass: CustomReuseStrategy },*/
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

const appRoutes: Routes = [
  {
    path: 'Authentication',
    component: AuthComponent
  },
  {
    path: '',
    component: UnibookComponent,
    children: [
      {path: 'structures', component: StructuresComponent, children: [
        {path: '', component: StructureListComponent, pathMatch: 'full', canActivate: [AuthGuard]},
        {path: ':id', component: StructureMainComponent, pathMatch: 'full', canActivate: [AuthGuard]},
      ]},
      {path: 'employees', component: EmployeesComponent, canActivate: [AuthGuard], children: [
        {path: '', component: EmployeeListComponent, pathMatch: 'full', canActivate: [AuthGuard]},
        {path: ':id', component: EmployeeMainComponent, pathMatch: 'full',  canActivate: [AuthGuard]}
      ]},
      {path: 'students', component: StudentsComponent, children: [
        {path: '', component: StudentListComponent, pathMatch: 'full', canActivate: [AuthGuard]},
        {path: ':id', component: StudentMainComponent, pathMatch: 'full',  canActivate: [AuthGuard]}
      ]},
      {path: 'orders', component: OrdersComponent, children: [
        {path: '', component: OrderListComponent, pathMatch: 'full', canActivate: [AuthGuard]},
        {path: ':id/:typeId', component: OrderMainComponent, pathMatch: 'full',  canActivate: [AuthGuard]}
      ]},
      {path: 'diplomas', loadChildren: () => DiplomasModule}
    ],
   resolve: {model: NestedResolver}
  },
  {
    path: '**',
    component: NotFoundComponent
  }
];
@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule {

}

新创建的DiplomasModule：

@NgModule({
  declarations: [
    DiplomasComponent,
    DiplomaListComponent,
    DiplomaMainComponent,
    DiplomaCanvasComponent,
  ],
  imports: [
    CommonModule,
    DiplomasRoutingModule,
    SharedModule
  ]
})
export class DiplomasModule {
}

diplomas routing.module.ts：

const diplomaRoutes: Routes = [
    {path: '', component: DiplomaListComponent, pathMatch: 'full', canActivate: [AuthGuard]},
    {path: ':id', component: DiplomaMainComponent, pathMatch: 'full',  canActivate: [AuthGuard]}
];

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

authGuard代码：

export class AuthGuard implements CanActivate {
  private URL = globalVars.baseUrl;
  constructor(private authService: AuthService) {}
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | boolean {
    return this.authService.isAuthenticated()
      .map((token) => true)
      .catch((er) => {
          return Observable.of(window.location.href = this.URL + '/ROS/unauthorized');
      });
   }
}

Answer 1

我认为这句话：

{path: 'diplomas', loadChildren: () => DiplomasModule}

应该如下所示：

{path: 'diplomas', loadChildren: 'path/to/diplomas.module#DiplomasModule'}