Components: ERROR TypeError: _this._renderer.addClass is not a function

[maxime1992]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

An image within a toolbar should be able to have a class

What is the current behavior?

I do have a toolbar:

<mat-toolbar color="primary">
  <img src="assets/img/angular-logo.png">
  ...
</mat-toolbar>

And it's working fine as long I do not add a class to the img.

If I do:

<mat-toolbar color="primary">
  <img class="logo-toolbar" src="assets/img/angular-logo.png">
  ...
</mat-toolbar>

Just adding a class throws an error:

ERROR TypeError: _this._renderer.addClass is not a function
    at common.js:2198
    at Array.forEach (<anonymous>)
    at NgClass.webpackJsonp.../../../common/esm5/common.js.NgClass._toggleClass (common.js:2196)
    at common.js:2156
    at Array.forEach (<anonymous>)
    at NgClass.webpackJsonp.../../../common/esm5/common.js.NgClass._applyInitialClasses (common.js:2156)
    at NgClass.set [as klass] (common.js:2048)
    at ClassDirective.set [as classBase] (flex-layout.es5.js:2819)
    at updateProp (core.js:12336)
    at checkAndUpdateDirectiveInline (core.js:12046)
    at checkAndUpdateNodeInline (core.js:13580)
    at checkAndUpdateNode (core.js:13523)
    at debugCheckAndUpdateNode (core.js:14384)
    at debugCheckDirectivesFn (core.js:14325)
    at Object.eval [as updateDirectives] (FeaturesComponent.html:3)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14310)
    at checkAndUpdateView (core.js:13490)
    at callViewAction (core.js:13840)
    at execComponentViewsAction (core.js:13772)
    at checkAndUpdateView (core.js:13496)
    at callViewAction (core.js:13840)
    at execEmbeddedViewsAction (core.js:13798)
    at checkAndUpdateView (core.js:13491)
    at callViewAction (core.js:13840)
    at execComponentViewsAction (core.js:13772)
    at checkAndUpdateView (core.js:13496)
    at callWithDebugContext (core.js:14711)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:14248)
    at ViewRef_.webpackJsonp.../../../core/esm5/core.js.ViewRef_.detectChanges (core.js:11292)
    at core.js:5783
    at Array.forEach (<anonymous>)
    at ApplicationRef.webpackJsonp.../../../core/esm5/core.js.ApplicationRef.tick (core.js:5783)
    at core.js:5616
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:392)
    at Object.onInvoke (core.js:4626)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (zone.js:142)
    at NgZone.webpackJsonp.../../../core/esm5/core.js.NgZone.run (core.js:4443)
    at Object.next (core.js:5616)
    at SafeSubscriber.schedulerFn [as _next] (core.js:4220)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:185)
    at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next (Subscriber.js:125)
    at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at EventEmitter.webpackJsonp.../../../../rxjs/Subject.js.Subject.next (Subject.js:55)
    at EventEmitter.webpackJsonp.../../../core/esm5/core.js.EventEmitter.emit (core.js:4200)
    at checkStable (core.js:4591)
    at Object.onHasTask (core.js:4639)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.hasTask (zone.js:445)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate._updateTaskCount (zone.js:465)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone._updateTaskCount (zone.js:289)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:209)
    at drainMicroTaskQueue (zone.js:602)
    at <anonymous>

What are the steps to reproduce?

git clone https://github.com/maxime1992/angular-ngrx-starter.git
cd angular-ngrx-starter
git checkout repro-bug-material
yarn
ng serve

Bug happen at http://localhost:4200

Open file app/features/features.component.html and remove the class="logo-toolbar" from the img within the navbar.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular/cli: 1.5.0-beta.4
node: 8.6.0
os: linux x64
@angular/animations: 5.0.0-rc.1
@angular/cdk: 2.0.0-beta.12
@angular/common: 5.0.0-rc.1
@angular/compiler: 5.0.0-rc.1
@angular/core: 5.0.0-rc.1
@angular/flex-layout: 2.0.0-beta.9
@angular/forms: 5.0.0-rc.1
@angular/http: 5.0.0-rc.1
@angular/material: 2.0.0-beta.12
@angular/platform-browser: 5.0.0-rc.1
@angular/platform-browser-dynamic: 5.0.0-rc.1
@angular/router: 5.0.0-rc.1
@angular/service-worker: 5.0.0-rc.1
@angular/cli: 1.5.0-beta.4
@angular/compiler-cli: 5.0.0-rc.1
@angular/language-service: 5.0.0-rc.1
typescript: 2.5.2

[maxime1992]

PS: Might be related to https://github.com/angular/material2/issues/4584

[amir-zahedi]

Same issue. Pretty much exact same versions

[ghd8]

see angular/flex-layout#420

[maxime1992]

@ghd8 thx!

[maxime1992]

So just to make it clear it has nothing to do with material, I can close the issue?

[ghd8]

Yes, you can. Should be fixed in the next angular/flex-layout release.

[amir-zahedi]

Any news on when the next release will be @ghd8 ?

[ghd8]

@fancycoder - No sorry, I don't know that.
You should ask this question in the referenced flex-layout issue or perhaps you can try the nightly build ? flex-layout NPM Installs

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}