2角度 - 未処理の約束拒否ではなく、知られている要素

Question

私はサイドバーのコンポーネントを持っており、その中に、私はここで

を埋めるためにサイドバーの項目コンポーネントを使用するには、私のサイドバーのアイテムメタデータである：

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

また、サイドバーの項目コンポーネントをインポートします。 '{/ sidebar-item/sidebar-item.component'から{SidebarItemComponent}をインポートします。

次のようにサイドバーコンポーネントの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 { } 

Answer 1

私のsidebを変更しました次のようになります。

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