1

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"
Improve this question
2
  • check if it works with angular 5? try to downgrade to angular 4. Commented Sep 9, 2017 at 2:07
  • I don't think angular-material2 has added support for angular 5... Commented Sep 9, 2017 at 3:11

2 Answers 2

Reset to default
1

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"
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.