crash with 2.0.0-beta.8

[alexfung888]

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

[alexfung888]

Forgot to mention.
if you navigate to '/' or '/home', all is fine.
to crash, either navigate to '/login', or click the 'login' button displayed by app.component.

[adamdport]

I'm getting the same error, also on my '/login' route. It breaks as soon as I add a fxLayout="row" container. It could also be related to this component existing in a module other than app-module. I'm not using tabs or ngIf, but I am using md-card.

[mbeckenbach]

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.

[jotatoledo]

Im having the same issue after upgrading to latest for both material and flex-layout

[ThomasBurleson]

@here - we will investigate this today! Thank you.

[ThomasBurleson]

@here - I just installed a new project with @angluar/cli 1.0.4 + node 6.9.5 + @angular/material@2.0.0-beta.5 + @angular/flex-layout@2.0.0-beta.8

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <md-tab-group>
      <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>
    </md-tab-group>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

./shared/shared.module.ts

import 'hammerjs';

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { MdTabsModule, MdCardModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { FlexLayoutModule } from '@angular/flex-layout';


@NgModule({
  imports: [
    CommonModule
    , MdTabsModule, MdCardModule
    , BrowserAnimationsModule
    , FlexLayoutModule
  ],
  declarations: [  ],
  providers: [  ],
  exports: [
    CommonModule
    , FormsModule
    , RouterModule
    , MdTabsModule, MdCardModule
    , BrowserAnimationsModule
    , FlexLayoutModule
  ]

})
export class SharedModule { }

Everything works great without any issues.

Suggestions

• delete your local node_modules folder and re-install with npm or yarn

[HarelM]

I don't have a minimal reproduction scenario, but I've seen this happen too. moving to beta.7 solves this.

[ThomasBurleson]

@HarelM - Moving to Beta.7 is not realistic solution.
@here - Angular 4.1 or higher is required with @angular/flex-layout@2.0.0-beta.8. See Deprecation Notes

[ThomasBurleson]

Closing as not a Flex-Layout issue.

[HarelM]

@ThomasBurleson I don't fully understand both your statements. When I moved to beta.8 an issue started happening, So there's not much I can do besides moving back to beta.7 until the issue is resolved (and probably skipping beta.8).
This happens only on beta.8 so I'm not sure how this is not a flex-layout issue...?