Угловой 'роутер-розетка' - элемент не известный '

Это повторяющийся вопрос, но поскольку проблема возникает по многим причинам, предыдущие ответы мне не помогли. Я пытаюсь разбить существующий проект на модули, и проблема заключается в компоненте 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 { }

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 {

}

Вновь созданные Дипломы

@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');
      });
   }
}

person Vugar Abdullayev    schedule 17.01.2018    source источник
comment
Пожалуйста, поделитесь полной app.module.ts   -  person Vivek Doshi    schedule 17.01.2018
comment
поделитесь им в plunkr или stackblitz   -  person rijin    schedule 17.01.2018
comment
общий модуль полного приложения.Но, к сожалению, совместное использование в stackblitz займет много времени для этого большого проекта, потому что stackblitz не поддерживает загрузку существующего проекта.   -  person Vugar Abdullayev    schedule 17.01.2018
comment
Какой компонент диплома загружается?   -  person rijin    schedule 17.01.2018
comment
Можем ли мы увидеть код AuthGuard?   -  person rijin    schedule 17.01.2018
comment
К сожалению, компонент "Дипломы" не загружен. Просто застрял на стартовом экране, потому что компонент unibook не распознает роутер и никуда не перемещается. Добавлен код защиты авторизации.   -  person Vugar Abdullayev    schedule 17.01.2018
comment
пожалуйста, опубликуйте HTML-часть UnibookComponent   -  person Vivek Doshi    schedule 17.01.2018


Ответы (1)


Думаю, эта строчка:

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

Должно выглядеть так:

{path: 'diplomas', loadChildren: 'path/to/diplomas.module#DiplomasModule'}
person Vivek Doshi    schedule 17.01.2018
comment
Использовал это раньше, но в нем написано ERROR in Error: Could not resolve module ./unibook/diplomas/diplomas.module относительно D: /vugar/TMIS-app/src/app-routing.module.ts. () = ›Этот метод автоматически импортирует модуль. - person Vugar Abdullayev; 17.01.2018
comment
@Vivek решил путь, и теперь выход wow routet распознается. но новая проблема роутер-розетка никуда не ориентируется - person Vugar Abdullayev; 17.01.2018
comment
@VugarAbdullayev, теперь это просто игра с проверкой пути к маршрутизатору, попробуйте отладить, вы уловили идею. - person Vivek Doshi; 17.01.2018
comment
Большое спасибо за помощь. - person Vugar Abdullayev; 17.01.2018
comment
@VugarAbdullayev, С удовольствием, Удачного кодирования :) - person Vivek Doshi; 17.01.2018