ブートストラップが角2で動作しない

Question

おはようございます。私はちょうどudemyに提供されたAngular 2コースから始めました、そして、私はそれにブートストラップをインストールしなければならないまで、すべてがうまくいっていました。

私はステップバイステップでインストールを行ったが、何らかの理由でブートストラップタグを追加しようとすると、ページ全体が白くなります。ここに私のコードは次のとおりです。

-

import { Component } from '@angular/core'; 
import { StocksComponent } from './stocks.component'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'Hello Angular2!'; 
    today = new Date(); 
} 

をapp.component.ts - app.component.html

<ngb-alert> 
    Testing... 
</ngb-alert> 


{{today | date: "dd/MMM/yyyy hh:mm a"}} 

<h1 style="color:white" myHighlight> 
    {{title}} 
</h1> 

<a routerLink="/stocks">STOCKS</a> 

<router-outlet></router-outlet> 

-

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 { MutualfundsComponent } from './mutualfunds/mutualfunds.component'; 
import { StocksComponent } from './stocks.component'; 
import { StockDirectiveDirective } from './stock-directive.directive'; 
import {HighLightDirective} from './highlight.directive'; 
import {StockService} from './stock.service'; 
import { DateFormatterPipe } from './date-formatter.pipe'; 
import {routing} from './app.routing'; 
import { DashboardComponent } from './dashboard/dashboard.component'; 
import {CurrencyService} from './currency.service'; 
import { BondsDirective } from './bonds.directive'; 
import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; 


@NgModule({ 
    declarations: [ 
    AppComponent, 
    MutualfundsComponent, 
    StocksComponent, 
    StockDirectiveDirective, 
    HighLightDirective, 
    DateFormatterPipe, 
    DashboardComponent, 
    BondsDirective 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    routing, 
    NgbModule 

    ], 
    providers: [StockService, CurrencyService], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

をapp.module.ts

- 角度-cli.json

{ 
    "project": { 
    "version": "1.0.0-beta.26", 
    "name": "angular2" 
    }, 
    "apps": [ 
    { 
     "root": "src", 
     "outDir": "dist", 
     "assets": [ 
     "assets", 
     "favicon.ico" 
     ], 
     "index": "index.html", 
     "main": "main.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.json", 
     "prefix": "app", 
     "mobile": false, 
     "styles": [ 
     "styles.css", 
     "../node_modules/bootstrap/dist/css/bootstrap.css" 
     ], 
     "scripts": [ 
      "../node_modules/jquery/dist/jquery.js", 
      "../node_modules/tether/dist/js/tether.js", 
      "../node_modules/bootstrap/dist/js/bootstrap.js" 
     ], 

     "environments": { 
     "source": "environments/environment.ts", 
     "dev": "environments/environment.ts", 
     "prod": "environments/environment.prod.ts" 
     } 
    } 
    ], 
    "e2e": { 
    "protractor": { 
     "config": "./protractor.conf.js" 
    } 
    }, 
    "test": { 
    "karma": { 
     "config": "./karma.conf.js" 
    } 
    }, 
    "defaults": { 
    "styleExt": "css", 
    "prefixInterfaces": false, 
    "inline": { 
     "style": false, 
     "template": false 
    }, 
    "spec": { 
     "class": false, 
     "component": true, 
     "directive": true, 
     "module": false, 
     "pipe": true, 
     "service": true 
    } 
    } 
} 

誰かがこの小さな問題で私を助けてくれることを願っています。

Answer 1

NgbModuleをトップレベルモジュールとしてインポートする必要があります。モジュール全体で使用できます。インポートは次のようになります。

imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    routing, 
    NgbModule.forRoot() 
] 

インポート時に.forRoot()に注目してください。これは問題を解決するはずです。

そして、angle-cli.jsonのscriptsセクションにブートストラップバンドルを含める必要はありません。

希望します。