Hey there, I recently enrolled in an Angular 2 course on udemy and everything was running smoothly until I encountered an issue while trying to install bootstrap.
I followed the installation steps diligently, but whenever I attempt to add any bootstrap elements, my entire page turns white. Below is the code snippet:
-- 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
}
}
}
I'm hoping someone can offer some assistance with this issue.