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

Question

这是一个重复的问题，但是由于这个问题是由很多原因引起的，所以以前的答案对我没有帮助。我正在尝试将现有项目拆分为模块，问题出在 Unibook 组件（以及员工、结构、学生、订单）中，它是新创建模块的父级，告诉路由器插座不是已知元素。这很奇怪，因为我将路由模块导入 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 { }

应用-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 {

}

新创建的文凭模块：

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

文凭-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'}

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

Angular 'router-outlet' is not a known element '

angular-routing

angular-ui-router

angular-module

angular

angular5