Fehlermeldung nach dem Importieren von @ angular/flex-layout in Angular-Projekt

Question

Ich entschied mich für das reaktive Grid-System von @angular/flex-layout anstelle von Bootstrap. Ich installierte einfach das NPM-Paket und zu meinem 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 { } 

Aber immer diese Fehler:

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) 

Pakete sind:

"@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" 

Answer 1

Es funktionierte für mich, wenn ich zu Angular herabgestuft 4. Laut den Kommentaren von @Julia und @ Edric hat Material2 momentan keine Unterstützung für Angular 5.

Aktualisierte Pakete sind:

"@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" 

Answer 2

Das Problem wurde mit Version behoben @angular/flex-layout@^2.0.0-beta.10 (siehe Github issue). Funktioniert jetzt perfekt mit Angular 5. :-)