TechQA.

Getting error after importing @angular/flex-layout to Angular project

855 views Asked by At

I decided to use the responsive grid system of @angular/flex-layout instead of Bootstrap's. I simply installed the npm package and added to my 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 { }

But getting these errors:

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)

Packages are:

"@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 typescript angular-material2 grid-system angular-flex-layout
Original Q&A
2

There are 2 answers

0
Ali Shahzad On BEST ANSWER

It worked for me when I downgraded to Angular 4. As per @Julia and @Edric's comments Material2 doesn't have support for Angular 5 right now.

Updated packages are:

"@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"
0
Kim Kern On

The issue was fixed with version @angular/flex-layout@^2.0.0-beta.10 (see Github issue). Works perfectly fine with Angular 5 now. :-)

Related Questions in ANGULAR

Related Questions in TYPESCRIPT

Related Questions in ANGULAR-MATERIAL2

Related Questions in GRID-SYSTEM

Related Questions in ANGULAR-FLEX-LAYOUT

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions