Проблема с Bootstrap 4 после миграции на Angular rc5 из rc beta

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

также получил ту же ошибку для DropDown, Крах и оповещения

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 К. трубы: [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'})