我决定使用@angular/flex-layout的响应网格系统而不是Bootstrap。我只是安装了NPM软件包，然后添加到我的AppModule：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {
MdButtonModule,
MdSnackBarModule,
MdProgressBarModule,
MdDialogModule,
MdRippleModule,
MdTooltipModule,
MdProgressSpinnerModule,
MdSidenavModule,
MdTabsModule,
MdMenuModule
} from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
FlexLayoutModule,
MdButtonModule,
MdSnackBarModule,
MdProgressBarModule,
MdDialogModule,
MdRippleModule,
MdTooltipModule,
MdProgressSpinnerModule,
MdSidenavModule,
MdTabsModule,
MdMenuModule,
AppRoutingModule
],
declarations: [
AppComponent,
HomeComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
但是得到这些错误：
index.js:1498 ERROR TypeError: _this._renderer.addClass is not a function
at index.js:2047
at Array.forEach (<anonymous>)
at NgClass.webpackJsonp.../../../common/esm5/index.js.NgClass._toggleClass (index.js:2045)
at index.js:2015
at Array.forEach (<anonymous>)
at NgClass.webpackJsonp.../../../common/esm5/index.js.NgClass._applyInitialClasses (index.js:2015)
at NgClass.set [as klass] (index.js:1926)
at ClassDirective.set [as classBase] (flex-layout.es5.js:2819)
at updateProp (index.js:11127)
at checkAndUpdateDirectiveInline (index.js:10819)
defaultErrorLogger @ index.js:1498
webpackJsonp.../../../core/esm5/index.js.ErrorHandler.handleError @ index.js:1555
(anonymous) @ index.js:5184
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:392
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:142
webpackJsonp.../../../core/esm5/index.js.NgZone.runOutsideAngular @ index.js:4349
webpackJsonp.../../../core/esm5/index.js.ApplicationRef_.tick @ index.js:5184
webpackJsonp.../../../core/esm5/index.js.ApplicationRef_._loadComponent @ index.js:5152
webpackJsonp.../../../core/esm5/index.js.ApplicationRef_.bootstrap @ index.js:5140
(anonymous) @ index.js:4988
webpackJsonp.../../../core/esm5/index.js.PlatformRef_._moduleDoBootstrap @ index.js:4988
(anonymous) @ index.js:4950
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:392
onInvoke @ index.js:4402
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:142
(anonymous) @ zone.js:844
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:425
onInvokeTask @ index.js:4393
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:424
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:192
drainMicroTaskQueue @ zone.js:602
Promise resolved (async)
scheduleMicroTask @ zone.js:585
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:414
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:236
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:256
scheduleResolveOrReject @ zone.js:842
ZoneAwarePromise.then @ zone.js:932
webpackJsonp.../../../core/esm5/index.js.PlatformRef_._bootstrapModuleWithZone @ index.js:4979
webpackJsonp.../../../core/esm5/index.js.PlatformRef_.bootstrapModule @ index.js:4964
../../../../../src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap d214a83ffcce8f110334:54
0 @ main.ts:11
__webpack_require__ @ bootstrap d214a83ffcce8f110334:54
webpackJsonpCallback @ bootstrap d214a83ffcce8f110334:25
(anonymous) @ main.bundle.js:1
index.js:1498 ERROR TypeError: _this._renderer.removeClass is not a function
at index.js:2050
at Array.forEach (<anonymous>)
at NgClass.webpackJsonp.../../../common/esm5/index.js.NgClass._toggleClass (index.js:2045)
at index.js:2015
at Array.forEach (<anonymous>)
at NgClass.webpackJsonp.../../../common/esm5/index.js.NgClass._applyInitialClasses (index.js:2015)
at NgClass.set [as klass] (index.js:1924)
at ClassDirective.set [as classBase] (flex-layout.es5.js:2819)
at updateProp (index.js:11127)
at checkAndUpdateDirectiveInline (index.js:10819)
defaultErrorLogger @ index.js:1498
webpackJsonp.../../../core/esm5/index.js.ErrorHandler.handleError @ index.js:1555
(anonymous) @ index.js:5184
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:392
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:142
webpackJsonp.../../../core/esm5/index.js.NgZone.runOutsideAngular @ index.js:4349
webpackJsonp.../../../core/esm5/index.js.ApplicationRef_.tick @ index.js:5184
(anonymous) @ index.js:5049
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:392
onInvoke @ index.js:4402
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:142
webpackJsonp.../../../core/esm5/index.js.NgZone.run @ index.js:4290
next @ index.js:5049
schedulerFn @ index.js:4102
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:238
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next @ Subscriber.js:185
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next @ Subscriber.js:125
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/Subject.js.Subject.next @ Subject.js:55
webpackJsonp.../../../core/esm5/index.js.EventEmitter.emit @ index.js:4088
checkStable @ index.js:4367
onHasTask @ index.js:4415
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:445
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:465
webpackJsonp.../../../../zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:289
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:209
drainMicroTaskQueue @ zone.js:602
Promise resolved (async)
scheduleMicroTask @ zone.js:585
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:414
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:236
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:256
scheduleResolveOrReject @ zone.js:842
ZoneAwarePromise.then @ zone.js:932
webpackJsonp.../../../core/esm5/index.js.PlatformRef_._bootstrapModuleWithZone @ index.js:4979
webpackJsonp.../../../core/esm5/index.js.PlatformRef_.bootstrapModule @ index.js:4964
../../../../../src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap d214a83ffcce8f110334:54
0 @ main.ts:11
__webpack_require__ @ bootstrap d214a83ffcce8f110334:54
webpackJsonpCallback @ bootstrap d214a83ffcce8f110334:25
(anonymous) @ main.bundle.js:1
index.js:1498 ERROR TypeError: _this._renderer.removeClass is not a function
at index.js:2050
at Array.forEach (<anonymous>)
at NgClass.webpackJsonp.../../../common/esm5/index.js.NgClass._toggleClass (index.js:2045)
at index.js:2015
at Array.forEach (<anonymous>)
at NgClass.webpackJsonp.../../../common/esm5/index.js.NgClass._applyInitialClasses (index.js:2015)
at NgClass.set [as klass] (index.js:1924)
at ClassDirective.set [as classBase] (flex-layout.es5.js:2819)
at updateProp (index.js:11127)
at checkAndUpdateDirectiveInline (index.js:10819)
defaultErrorLogger @ index.js:1498
webpackJsonp.../../../core/esm5/index.js.ErrorHandler.handleError @ index.js:1555
(anonymous) @ index.js:5184
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:392
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:142
webpackJsonp.../../../core/esm5/index.js.NgZone.runOutsideAngular @ index.js:4349
webpackJsonp.../../../core/esm5/index.js.ApplicationRef_.tick @ index.js:5184
(anonymous) @ index.js:5049
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:392
onInvoke @ index.js:4402
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:142
webpackJsonp.../../../core/esm5/index.js.NgZone.run @ index.js:4290
next @ index.js:5049
schedulerFn @ index.js:4102
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:238
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next @ Subscriber.js:185
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next @ Subscriber.js:125
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/Subject.js.Subject.next @ Subject.js:55
webpackJsonp.../../../core/esm5/index.js.EventEmitter.emit @ index.js:4088
checkStable @ index.js:4367
onHasTask @ index.js:4415
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:445
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:465
webpackJsonp.../../../../zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:289
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:209
drainMicroTaskQueue @ zone.js:602
Promise resolved (async)
scheduleMicroTask @ zone.js:585
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:414
onScheduleTask @ zone.js:301
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:405
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:236
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:256
scheduleResolveOrReject @ zone.js:842
resolvePromise @ zone.js:790
(anonymous) @ zone.js:717
webpackJsonpCallback @ bootstrap d214a83ffcce8f110334:21
(anonymous) @ common.chunk.js:1
index.js:1498 ERROR TypeError: _this._renderer.removeClass is not a function
at index.js:2050
at Array.forEach (<anonymous>)
at NgClass.webpackJsonp.../../../common/esm5/index.js.NgClass._toggleClass (index.js:2045)
at index.js:2015
at Array.forEach (<anonymous>)
at NgClass.webpackJsonp.../../../common/esm5/index.js.NgClass._applyInitialClasses (index.js:2015)
at NgClass.set [as klass] (index.js:1924)
at ClassDirective.set [as classBase] (flex-layout.es5.js:2819)
at updateProp (index.js:11127)
at checkAndUpdateDirectiveInline (index.js:10819)
defaultErrorLogger @ index.js:1498
webpackJsonp.../../../core/esm5/index.js.ErrorHandler.handleError @ index.js:1555
(anonymous) @ index.js:5184
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:392
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:142
webpackJsonp.../../../core/esm5/index.js.NgZone.runOutsideAngular @ index.js:4349
webpackJsonp.../../../core/esm5/index.js.ApplicationRef_.tick @ index.js:5184
(anonymous) @ index.js:5049
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:392
onInvoke @ index.js:4402
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:142
webpackJsonp.../../../core/esm5/index.js.NgZone.run @ index.js:4290
next @ index.js:5049
schedulerFn @ index.js:4102
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:238
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next @ Subscriber.js:185
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next @ Subscriber.js:125
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/Subject.js.Subject.next @ Subject.js:55
webpackJsonp.../../../core/esm5/index.js.EventEmitter.emit @ index.js:4088
checkStable @ index.js:4367
onLeave @ index.js:4446
onInvokeTask @ index.js:4396
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:424
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:192
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:499
invokeTask @ zone.js:1427
globalZoneAwareCallback @ zone.js:1445
job.service.ts:12 JobService constructor called
index.js:1498 ERROR TypeError: _this._renderer.removeClass is not a function
at index.js:2050
at Array.forEach (<anonymous>)
at NgClass.webpackJsonp.../../../common/esm5/index.js.NgClass._toggleClass (index.js:2045)
at index.js:2015
at Array.forEach (<anonymous>)
at NgClass.webpackJsonp.../../../common/esm5/index.js.NgClass._applyInitialClasses (index.js:2015)
at NgClass.set [as klass] (index.js:1924)
at ClassDirective.set [as classBase] (flex-layout.es5.js:2819)
at updateProp (index.js:11127)
at checkAndUpdateDirectiveInline (index.js:10819)
defaultErrorLogger @ index.js:1498
webpackJsonp.../../../core/esm5/index.js.ErrorHandler.handleError @ index.js:1555
(anonymous) @ index.js:5184
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:392
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:142
webpackJsonp.../../../core/esm5/index.js.NgZone.runOutsideAngular @ index.js:4349
webpackJsonp.../../../core/esm5/index.js.ApplicationRef_.tick @ index.js:5184
(anonymous) @ index.js:5049
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:392
onInvoke @ index.js:4402
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:142
webpackJsonp.../../../core/esm5/index.js.NgZone.run @ index.js:4290
next @ index.js:5049
schedulerFn @ index.js:4102
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:238
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next @ Subscriber.js:185
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next @ Subscriber.js:125
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/Subject.js.Subject.next @ Subject.js:55
webpackJsonp.../../../core/esm5/index.js.EventEmitter.emit @ index.js:4088
checkStable @ index.js:4367
onHasTask @ index.js:4415
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:445
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:465
webpackJsonp.../../../../zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:289
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:209
drainMicroTaskQueue @ zone.js:602
Promise resolved (async)
scheduleMicroTask @ zone.js:585
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:414
onScheduleTask @ zone.js:301
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:405
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:236
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:256
scheduleResolveOrReject @ zone.js:842
resolvePromise @ zone.js:790
(anonymous) @ zone.js:717
webpackJsonpCallback @ bootstrap d214a83ffcce8f110334:21
(anonymous) @ company.module.chunk.js:1
index.js:1498 ERROR TypeError: _this._renderer.removeClass is not a function
at index.js:2050
at Array.forEach (<anonymous>)
at NgClass.webpackJsonp.../../../common/esm5/index.js.NgClass._toggleClass (index.js:2045)
at index.js:2015
at Array.forEach (<anonymous>)
at NgClass.webpackJsonp.../../../common/esm5/index.js.NgClass._applyInitialClasses (index.js:2015)
at NgClass.set [as klass] (index.js:1924)
at ClassDirective.set [as classBase] (flex-layout.es5.js:2819)
at updateProp (index.js:11127)
at checkAndUpdateDirectiveInline (index.js:10819)
软件包是：
"@angular/animations": "~5.0.0-beta.6",
"@angular/cdk": "^2.0.0-beta.10",
"@angular/common": "^5.0.0-beta.6",
"@angular/compiler": "^5.0.0-beta.6",
"@angular/core": "^5.0.0-beta.6",
"@angular/flex-layout": "^2.0.0-beta.9",
"@angular/forms": "^5.0.0-beta.6",
"@angular/http": "^5.0.0-beta.6",
"@angular/material": "^2.0.0-beta.10",
"@angular/platform-browser": "^5.0.0-beta.6",
"@angular/platform-browser-dynamic": "^5.0.0-beta.6",
"@angular/router": "^5.0.0-beta.6",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"rxjs": "^5.1.0",
"zone.js": "^0.8.10"
当我降级到Angular 4时，它对我有用。
更新的软件包是：
"@angular/animations": "~4.3.6",
"@angular/cdk": "^2.0.0-beta.10",
"@angular/common": "^4.3.6",
"@angular/compiler": "^4.3.6",
"@angular/core": "^4.3.6",
"@angular/flex-layout": "^2.0.0-beta.9",
"@angular/forms": "^4.3.6",
"@angular/http": "^4.3.6",
"@angular/material": "^2.0.0-beta.10",
"@angular/platform-browser": "^4.3.6",
"@angular/platform-browser-dynamic": "^4.3.6",
"@angular/router": "^4.3.6",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"rxjs": "^5.1.0",
"zone.js": "^0.8.10"
使用版本@angular/flex-layout@^2.0.0-beta.10修复了该问题（请参阅GitHub问题）。现在，Angular 5可以很好地工作。： - ）