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...?

[alexfung888]

@ThomasBurleson Please reopen it. I've reorted right up front that if I create a fresh new project with just the mdtab and ngif, it won't crash. I just don't know what else to trim from my zip to make it stop crashing. Also in my report, I have already deleted the node modules directory and npm install from fresh before submitting the issue. If this is sufficient to close the case, you wouldn't have to consider it in the first place. You have not found anything more than what I have stated in my report statement.

[alexfung888]

@ThomasBurleson Try this. It is the minimum requirement for crashing I so far determined. Much longer than just an ngIf. To crash, the followings are needed: 1) at least two md-tab 2) one md-tab with <ng-template md-tab-label>, the other with <md-tab label> 3) fxShow at md-tab-label 4) fxFlex at md-card 5) class at md-card-header 6) ngIf at md-tab

if any one of the above 6 conditions is removed, it won't crash.

<md-tab-group>
  <md-tab>
    <ng-template md-tab-label>
      <span fxShow>tab 1 with fxShow</span>
    </ng-template>
    <md-card fxFlex>
      <md-card-header class="md-primary">
        <b>social identity</b>
      </md-card-header>
      <md-card-content>
        hello world 1
      </md-card-content>
    </md-card>
  </md-tab>

  <md-tab label="Password" *ngIf='true'>
    <md-card fxFlex>
      <md-card-header class="md-primary">
        <b>Local identity</b>
      </md-card-header>
      <md-card-content>
        hello world 2
      </md-card-content>
    </md-card>
  </md-tab>
</md-tab-group>

[alexfung888]

https://plnkr.co/edit/2L2JAHZObh8dWKsapPpX

[ThomasBurleson]

@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]

Here is a Plunkr Demo

When the fxShow used inside the <ng-template> is removed, then errors no longer manifest. The combination of M2 b5 + FlexLayout b8 has some odd DI issues. We are investigating!

[alexfung888]

Thanks. Actually it won't crash if any one of the 6 list conditions are not present. The 6 together is necessary and sufficient for the problem.

[ktersius]

Reverted back to beta 7 for now. I'm not quite sure. Currently running ng 4.0.3, will 4.1 solve the problem?

[jotatoledo]

The problem appears too with ng 4.1.x, at least in my configuration

[mackelito]

@ThomasBurleson we are seeing this issue as well but we do not use ng-template at all will investigate more and see what the issue derives from.

[mackelito]

My apologies, we missed the upgrade to beta.5 on Material.

[HarelM]

I have updated my code to latest versions of angular libraries (4.1.3), material (2.0.0-beta.5) and flex-layout (2.0.0-beta.8). The following is the error I'm getting:

ERROR TypeError: _this._renderer.setStyle is not a function
    at http://israelhiking.osm.org.il/test/vendor.bundle.js:38603:69
    at Array.forEach (native)
    at http://israelhiking.osm.org.il/test/vendor.bundle.js:38603:22
    at Array.forEach (native)
    at FlexDirective.BaseFxDirective._applyStyleToElements (http://israelhiking.osm.org.il/test/vendor.bundle.js:38602:29)
    at FlexDirective.BaseFxDirective._getFlowDirection (http://israelhiking.osm.org.il/test/vendor.bundle.js:38574:22)
    at FlexDirective._validateValue (http://israelhiking.osm.org.il/test/vendor.bundle.js:138234:27)
    at FlexDirective._updateStyle (http://israelhiking.osm.org.il/test/vendor.bundle.js:138226:55)
    at FlexDirective.ngOnChanges (http://israelhiking.osm.org.il/test/vendor.bundle.js:138191:18)
    at checkAndUpdateDirectiveInline (http://israelhiking.osm.org.il/test/vendor.bundle.js:11022:19)

Unfortunately I don't have a minimal reproduction plunker but the issue happens in the following site: http://israelhiking.osm.org.il/test/ Using the following scenario:

1. wait for the site to load.
2. click on the pencil in the right side.
3. click anywhere on the map.

The code for the entire site can be found here: https://github.com/IsraelHikingMap/Site/ (Angular4 branch.) Probably related to the following file: https://github.com/IsraelHikingMap/Site/blob/Angular4/IsraelHiking.Web/sources/application/components/markerpopup/poiMarkerPopup.html No ng-template or anything special besides dynamic loading. Which is created dynamically in the following class: https://github.com/IsraelHikingMap/Site/blob/Angular4/IsraelHiking.Web/sources/application/services/layers/routelayers/RouteStateEdit.ts#L63 Sorry I don't have a minimal reproduction.

Please let me know if I can help in anyway, I would very much like this issue to be resolved in order to publish my migrated angular 4 site.

As a side note, I think this also causes an issue when using this scenario in chrome on android, but I was not able to verify that this is the root cause of the problem there (which is worse since the buttons that should open in the popup of the marker are not responding to clicks).

[tmburnell]

I have seen the same issue ... and i have a common component that is used across my app that has this as the first line in the html:

<div fxLayout="row" fxLayoutAlign="end">

if i use with beta.7 this works fine, however with beta.8 it gets the styling error. however if i do not use fxLayoutAlign it works on 8:

<div fxLayout="row">

dont know if this help determine the issue.

[ThomasBurleson]

Has Pull Request #298

[HarelM]

I also saw that adding min-width to the container solved this bug for me, if anyone will see this in the future.

[alexfung888]

No, min-width does nothing for me. Crashes in the same manner.

[ThomasBurleson]

This has been fixed and is available in the master builds (but not yet released as a Beta on npm). See https://plnkr.co/edit/h8hzyoEyqdCXmTBA7DfK?p=preview