flex-layout: crash with 2.0.0-beta.8

I got

ERROR Error: Uncaught (in promise): TypeError: _this._renderer.setStyle is not a function
TypeError: _this._renderer.setStyle is not a function
    at http://localhost:4200/vendor.bundle.js:15947:29
    at Array.forEach (native)
    at LayoutDirective.BaseFxDirective._applyStyleToElement (http://localhost:4200/vendor.bundle.js:15946:29)
    at LayoutDirective._updateWithDirection (http://localhost:4200/vendor.bundle.js:32683:14)

on beta8 but runs smooth on beta7.

After cutting away most of the code, it boils down to this: \src\app\auth\login\login.component.html

  <md-tab label="Password" *ngIf='true'>
      <md-card fxFlex="0 1 18em" fxFlex.xs='100'>
        <md-card-header class="md-primary md-hue-1">
          <b>Local identity (email+password)</b>
        </md-card-header>
        <md-card-content>
          hello world
        </md-card-content>
      </md-card>
  </md-tab>

I want to hide a tab (not disable) with ‘media$ | async’, but the code now crashes with anything in the ngif. Without the ngIf, it won’t crash.

however, if I build a new app with just an md-tab and ngif, it won’t crash. Some the key is more than mdtab+ngif.

I have just updated everything on 29/4/2017 morning:

node 790
npm 450
angular 410
angular CLI 101
angular material 200beta3
angular flex-layout:
project does not crash with 2.0.0-beta.7
project crashes with 2.0.0-beta.8

trimmed source code: 200b8.zip

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 4
Comments: 26 (8 by maintainers)

Commits related to this issue

fix(flexbox): resolve 'renderer.setStyle()' error Directives extending NgClass and NgStyle require deprecated Renderer; while other FlexBox directives require Renderer2. Injecting both Renderers caus... — committed to angular/flex-layout by ThomasBurleson 7 years ago
fix(flexbox): resolve 'renderer.setStyle()' error Directives extending NgClass and NgStyle require deprecated Renderer; while other FlexBox directives require Renderer2. Injecting both Renderers caus... — committed to angular/flex-layout by ThomasBurleson 7 years ago
fix(flexbox): resolve 'renderer.setStyle()' error * Revert back to Renderer (from Renderer2); Injecting both Renderers causes intermittent `TypeError: _this._renderer.setStyle is not a function` erro... — committed to angular/flex-layout by ThomasBurleson 7 years ago
fix(flexbox): resolve 'renderer.setStyle()' error * Revert back to Renderer (from Renderer2); Injecting both Renderers causes intermittent `TypeError: _this._renderer.setStyle is not a function` erro... — committed to angular/flex-layout by ThomasBurleson 7 years ago
fix(flexbox): resolve 'renderer.setStyle()' error (#298) * Revert back to Renderer (from Renderer2); Injecting both Renderers causes intermittent `TypeError: _this._renderer.setStyle is not a functi... — committed to angular/flex-layout by ThomasBurleson 7 years ago

Most upvoted comments

I’m getting the same error. I had beta 8 installed together with material beta 3. After upgrading to material beta 5 it crashes. Downgrading flex-layout to beta 7 made it work.

mbeckenbach on May 15, 2017

@alexfung888 - I will reopen. The crash originates with fxShow used in an <ng-template>

<ng-template md-tab-label>
  <span fxShow>tab 1 with fxShow</span>
</ng-template>

ThomasBurleson on May 20, 2017