Блог

У меня есть компонент, который находится в shared модуле, и я успешно использую этот компонент внутри другого, однако, когда я пытаюсь использовать его во втором компоненте, я вижу следующую ошибку;

 ERROR in src/app/dashboard/dashboard-report/dashboard-report.component.html:1:1 - error NG8001: 'app-header-unauthenticated' is not a known element:
1. If 'app-header-unauthenticated' is an Angular component, then verify that it is part of this module.
2. If 'app-header-unauthenticated' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  

Я просмотрел то, что я сделал, и я не могу понять, где я ошибаюсь.

У меня есть модуль с именем, shared у которого есть компонент с именем header-unauthenticated , который экспортируется, чтобы его можно было использовать внутри других модулей / компонентов. Вот shared модуль;

 @NgModule({
  declarations: [
    AlertComponent,
    HeaderUnauthenticatedComponent
  ],
  exports: [
    AlertComponent,
    HeaderUnauthenticatedComponent
  ],
  imports: [
    CommonModule
  ]
})
export class SharedModule { }
  

Я пытаюсь использовать header-unauthenticated компонент внутри вызываемого компонента, dashboard-report который находится внутри другого модуля dashboard . Я импортировал shared модуль в dashboard module, чтобы можно было использовать его компоненты, но они, похоже, не работают. Вот dashboard модуль;

 @NgModule({
  declarations: [DashboardReportComponent],
  imports: [
    CommonModule,
    SharedModule
  ]
})
export class DashboardModule { }
  

У меня есть другой модуль access и компонент внутри него login , где я могу использовать header-unauthenticated компонент без проблем, и сравнивая access модуль с dashboard модулем, я не вижу никаких различий.

 @NgModule({
  declarations: [LoginComponent],
  imports: [
    CommonModule,
    SharedModule,
    ReactiveFormsModule
  ]
})
export class AccessModule { }
  

Где я ошибаюсь, почему header-unauthenticated компонент не найден?

Обнаружена проблема, dashboard компонент не импортировался в app.module.ts файл, его добавление устранило проблему;

 @NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AngularFireModule.initializeApp(environment.firebase),
    AppRoutingModule,
    AccessModule,
    DashboardModule,
    SharedModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }