Блог

У меня есть компонент боковой панели, и в нем я использую компоненты элементов боковой панели для заполнения

Вот мои метаданные элемента боковой панели:

 @Component({
  moduleId: module.id,
  selector: 'sd-sidebar-item',
  templateUrl: 'sidebar-item.component.html',
  styleUrls: ['sidebar-item.component.css'],
})
 

Вот мета родительских компонентов боковой панели:

 @Component({
 moduleId: module.id,
 selector: 'sd-sidebar',
 templateUrl: 'sidebar.component.html',
 styleUrls: ['sidebar.component.css']
})
 

Он также импортирует компонент элемента боковой панели.
импортируйте { SidebarItemComponent } из ‘./sidebar-item/sidebar-item.component’;

HTML-код компонента боковой панели выглядит следующим образом:

Ошибки указывают на это.

 Unhandled Promise rejection: Template parse errors:
'sd-sidebar-item' is not a known element:
1. If 'sd-sidebar-item' is an Angular component, then verify that it is part of this module.
 

Мой модуль элемента боковой панели выглядит следующим образом:

 import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../../shared/shared.module';
import { SidebarItemComponent } from './sidebar-item.component';


@NgModule({
  imports: [CommonModule, SharedModule],
  declarations: [SidebarItemComponent],
  exports: [SidebarItemComponent],
  providers: []
})
export class SidebarItemModule { }
 

Мой модуль компонента боковой панели выглядит следующим образом:

 import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../shared/shared.module';
import { SidebarComponent } from './sidebar.component';
import { SidebarItemModule } from './sidebar-item/sidebar-item.module';


@NgModule({
  imports: [CommonModule, SharedModule],
  declarations: [SidebarComponent],
  exports: [SidebarComponent, SidebarItemModule],
  providers: []
})
export class SidebarModule { }
 

Мой основной модуль корневого приложения выглядит следующим образом:

 import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF } from '@angular/common';
import { RouterModule } from '@angular/router';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { routes } from './app.routes';

import { HeaderModule } from './header/header.module';
import { SidebarModule } from './sidebar/sidebar.module';
import { ChatModule } from './chat/chat.module';

import { SharedModule } from './shared/shared.module';

@NgModule({
  imports: [BrowserModule, HttpModule, RouterModule.forRoot(routes), HeaderModule, SidebarModule, ChatModule, SharedModule.forRoot()],
  declarations: [AppComponent],
  providers: [{
    provide: APP_BASE_HREF,
    useValue: '<%= APP_BASE %>'
  }],
  bootstrap: [AppComponent]

})

export class AppModule { }
 

Я изменил свой sidebar.module.ts на:

 @NgModule({
  imports: [CommonModule, SharedModule, SidebarItemModule],
  declarations: [SidebarComponent],
  exports: [SidebarComponent],
  providers: []
})
export class SidebarModule { }