晚上好。我刚刚开始使用udemy提供的Angular 2课程,一切都很顺利,直到我不得不在其上安装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
}
}
}
我希望有人可以帮我解决这个小问题
答案 0 :(得分:4)
您需要导入NgbModule
作为顶级模块,然后您可以在整个模块中使用。你的导入应该是这样的:
imports: [
BrowserModule,
FormsModule,
HttpModule,
routing,
NgbModule.forRoot()
]
注意导入时的.forRoot()
。这应该可以解决问题。
并且您不需要在angular-cli.json的脚本部分包含引导程序包。
希望有所帮助