将@angular/flex布局导入angular项目后出错

我决定使用

@angular/flex布局的响应网格系统，而不是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)

当我降到4级时，它对我起了作用。根据@Julia和@Edric的评论，Material2目前不支持Angular 5

更新包包括：

"@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/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
（请参阅）修复了该问题。现在可以完美配合角度5.：-）
 检查它是否与angular 5一起工作？尝试降级到angular 4。我不认为
angular-material2
增加了对angular 5的支持。。。