从 rc beta 迁移到 Angular rc5 后 Bootstrap 4 出现问题答案

【问题标题】：Issue with Bootstrap 4 after migration to Angular rc5 from rc beta从 rc beta 迁移到 Angular rc5 后 Bootstrap 4 出现问题
【发布时间】：2017-01-07 21:36:15
【问题描述】：

我已将我的 Angular 应用程序从 Beta 版迁移到 Angular rc5。尝试在组件中添加任何引导控件时出现以下错误。

(index):48 错误: (SystemJS) 找不到指令注释 Dropdown(…)(匿名函数)@(索引):48ZoneDelegate.invoke@ zone.js:332Zone.run@zone.js:225（匿名函数）@ zone.js:591ZoneDelegate.invokeTask@zone.js:365Zone.runTask@ zone.js:265drainMicroTaskQueue@zone.js:497ZoneTask.invoke@ zone.js:437

DropDown、Collapse 和 Alert 也出现同样的错误

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],

请帮我解决这个问题。

提前致谢，斯瓦普尼尔 K. 管道：[TranslatePipe，SearchPipe] })

【问题讨论】：

您的文字图片isn't very helpful。它不能被复制到编辑器中，而且它的索引也不是很好，这意味着有相同问题的其他用户不太可能在这里找到答案。请edit您的帖子直接合并相关文本（最好使用复制+粘贴以避免转录错误）。
我的回答有帮助吗？
@JohnSiu：不，我试过了。但仍然面临同样的错误。
我需要一个 github repo 来测试它。

标签： angular angular2-directives bootstrap-4

【解决方案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'})

【讨论】：