rcベータ版からAngular rc5に移行した後のブートストラップ4の問題

Question

ベータ版からAngular rc5へ私の角型アプリケーションを移行しました。 コンポーネントにブートストラップコントロールを追加しようとすると、次のエラーが表示されます。

(index):48 Error: (SystemJS) No Directive annotation found on Dropdown(…)(anonymous function) @ (index):48ZoneDelegate.invoke @ zone.js:332Zone.run @ zone.js:225(anonymous function) @ zone.js:591ZoneDelegate.invokeTask @ zone.js:365Zone.runTask @ zone.js:265drainMicroTaskQueue @ zone.js:497ZoneTask.invoke @ zone.js:437

はまた、ドロップダウンのために同じエラーを得、折りたたむとアラート

App.module.tsコード

import {HeaderComponent} from './scripts/common/header.component'; 
import {MyProfileComponent} from './scripts/my-profile/my-profile.component'; 
import {SecurityService} from './scripts/services/security.service'; 
import {Configuration} from "./app.contstants"; 
import {FormBuilder, Validators, Control, ControlGroup, FORM_DIRECTIVES} from '@angular/common'; 
import {EventEmitterComponent}from "./scripts/common/event-emitter.component"; 
@NgModule({ 

    declarations: [MyProfileComponent, HeaderComponent], 
    imports  : [BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(rootRouterConfig)], 
    providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }, HttpModule, SecurityService, Configuration, FormBuilder, EventEmitterComponent, TranslateService, TranslateLoader], 
    bootstrap: [AppComponent], 

}) 
export class AppModule { 

} 

header.component.ts

import { Dropdown,DROPDOWN_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; 
import {CrudService} from '../../crud.service'; 

@Component({ 
    selector: '.app-header', 
    templateUrl: 'assets/scripts/common/header.html', 
    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, ROUTER_DIRECTIVES, Collapse,JQueryComponent,RouterLink], 
    providers: [CrudService], 

この問題を解決するのを手伝ってください。予め

おかげで、 Swapnil K.パイプ：[TranslatePipe、SearchPipe] }）

Answer 1

App.modules.tsにおいて、全くAppComponentインポートは存在しません。 header.component.tsには、directivesとprovidersをApp.module.tsに移動する必要があります。

App.module.ts

import {AppComponent} from '<PATH FOR AppComponent>'; // <---- Import AppComponent 

import {HeaderComponent} from './scripts/common/header.component'; 
import {MyProfileComponent} from './scripts/my-profile/my-profile.component'; 
import {SecurityService} from './scripts/services/security.service'; 
import {Configuration} from "./app.contstants"; 
import {FormBuilder, Validators, Control, ControlGroup, FORM_DIRECTIVES} from '@angular/common'; 
import {EventEmitterComponent}from "./scripts/common/event-emitter.component"; 

// Moved from HeaderComponent 
import { Dropdown, DROPDOWN_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; 
import {CrudService} from '../../crud.service'; 


@NgModule({ 

    declarations: [ 
     MyProfileComponent, 
     HeaderComponent], 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     HttpModule, 
     RouterModule.forRoot(rootRouterConfig)], 
    // directives moved from HeaderComponent 
    directives: [ 
     CORE_DIRECTIVES, 
     FORM_DIRECTIVES, 
     ROUTER_DIRECTIVES, 
     Collapse, 
     JQueryComponent, 
     RouterLink], 
    providers: [ 
     { provide: LocationStrategy, useClass: HashLocationStrategy }, 
     HttpModule, 
     SecurityService, 
     Configuration, 
     FormBuilder, 
     EventEmitterComponent, 
     TranslateService, 
     TranslateLoader, 
     CrudService], // service moved from HeaderComponent 
    bootstrap: [ 
     AppComponent], 

}) 
export class AppModule { } 

header.component.ts

@Component({ 
    selector: '.app-header', 
    templateUrl: 'assets/scripts/common/header.html'}) 

（// meta.unix.stackexchangeテキストのあなたのイメージ[非常に有用ではありません]