Bootstrap 无法使用 Angular 2

Question

晚上好。我刚开始使用 udemy 上提供的 Angular 2 课程，一切都很顺利，直到我不得不在其上安装 bootstrap。

我一步步安装，但由于某些原因，当我尝试添加任何 bootstrap 标签时，整个页面变成白色。这是我的代码：

-- app.component.ts

    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.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>

-- app.module.ts

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 { }

-- angular-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()。这应该可以解决问题。

而且您不需要在 angular-cli.json.

的脚本部分包含 bootstrap 包

希望对您有所帮助

Bootstrap 无法使用 Angular 2

Bootstrap not working with Angular 2

typescript

angular-bootstrap

ng-bootstrap

angular