Angular2 Submodule Import Issue

Question

У меня проблема с подмодулем, использующим NgSemanticModule. Сам модуль работает без тегов NgSemantic внутри шаблона компонентов подмодуля. Пытаться использовать компоненты NgSemantig не удается в моем подмодуле. Если я использую шаблон HeaderComponent в своем шаблоне AppComponent, то работает тот же код. Как импортировать модуль NgSemantic на уровне модуля заголовка?

Заголовок модуля:

import { NgModule } from '@angular/core'; 
import { HeaderComponent } from "./header.component"; 
import { NgSemanticModule } from "ng-semantic"; 


@NgModule({ 
    declarations: [ 
    HeaderComponent 
], 
imports: [ 
NgSemanticModule 
], 
providers: [], 
exports:[ 
    HeaderComponent 
] 
}) 

export class HeaderModule { } 

Заголовок Компонент:

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'app-header', 
    templateUrl: './header.component.html', 
    styleUrls: ['./header.component.css'] 
}) 
export class HeaderComponent{} 

Шаблон заголовка:

<sm-menu title="Angular2" class="inverted teal" logo="/assets/images/semantic.png"> 
<a sm-item *ngFor="let item of items" [icon]="item.icon">{{item?.title}}</a> 

<sm-menu class="menu right secondary"> 
<a sm-item href="#/elements/menu" 
    image="http://semantic-ui.com/images/avatar/small/stevie.jpg">Elliot Fu</a> 
<a sm-item icon="sidebar big"></a> 

Модуль

My App:

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import { AppComponent } from './app.component'; 
import { NgSemanticModule } from "ng-semantic"; 
import { HeaderModule } from "./header/"; 

@NgModule({ 
declarations: [ 
    AppComponent 
], 
imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    NgSemanticModule, 
    HeaderModule 
    ], 
    providers: [], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule {} 

App Компонент:

import { Component } from '@angular/core'; 

@Component({ 
selector: 'app-root', 
template: '<app-header></app-header>', 
styleUrls: ['./app.component.css'] 
}) 
export class AppComponent {} 

Исключение:

unhandled Promise rejection: Template parse errors: 
Can't bind to 'ngForOf' since it isn't a known property of 'a'. ("<sm-menu  title="Angular2" class="inverted teal" logo="/assets/images/semantic.png"> 
<a sm-item [ERROR ->]*ngFor="let item of items" [icon]="item.icon"> {{item?.title}}</a> 

Answer 1

Вы должны импортировать CommonModule внутри HeaderModule. Этот модуль содержит общие директивы от angular2 (например, *ngFor).

import { NgModule } from "@angular/core"; 
import { CommonModule } from "@angular/common"; 
import { HeaderComponent } from "./header.component"; 
import { NgSemanticModule } from "ng-semantic"; 


@NgModule({ 
    declarations: [ 
     HeaderComponent 
    ], 
    imports: [ 
     NgSemanticModule, 
     CommonModule 
    ], 
    providers: [ 

    ], 
    exports:[ 
     HeaderComponent 
    ] 
}) 

export class HeaderModule {}