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

Question

It is duplicate question but since the issue is because of many reasons ,previous answers did not help me. I am trying to split existing project into modules and the problem is in Unibook component(and in employees,structures,students,orders) which is parent of newly created module tells router-outlet is not a know element. It is strange since I import routing module into AppModule. Project stucks on startup screen because unibook component does not recognize router-outlet so does not navigate anywhere. I realize that unibook component is not loaded at the beginning. 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 {

}

Newly created 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 code:

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

I think this line :

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

Should look like this :

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