crash with 2.0.0-beta.8 #270

alexfung888 · 2017-04-29T06:09:49Z

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

The text was updated successfully, but these errors were encountered:

alexfung888 · 2017-04-29T06:13:01Z

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 · 2017-05-11T14:12:13Z

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 · 2017-05-15T07:25:57Z

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 · 2017-05-19T10:37:58Z

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

ThomasBurleson · 2017-05-19T12:01:17Z

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

ThomasBurleson · 2017-05-20T00:03:37Z

@here - I just installed a new project with @angluar/cli 1.0.4 + node 6.9.5 + @angular/[email protected] + @angular/[email protected]

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 · 2017-05-20T00:06:00Z

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

ThomasBurleson · 2017-05-20T00:07:07Z

@HarelM - Moving to Beta.7 is not realistic solution.
@here - Angular 4.1 or higher is required with @angular/[email protected]. See Deprecation Notes

ThomasBurleson · 2017-05-20T00:26:58Z

Closing as not a Flex-Layout issue.

HarelM · 2017-05-20T00:31:54Z

@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 · 2017-05-20T03:55:59Z

@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 · 2017-05-20T05:27:05Z

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

at least two md-tab
one md-tab with <ng-template md-tab-label>, the other with <md-tab label>
fxShow at md-tab-label
fxFlex at md-card
class at md-card-header
*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 · 2017-05-20T05:36:33Z

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

ThomasBurleson · 2017-05-20T17:00:19Z

@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 · 2017-05-20T18:34:59Z

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 · 2017-05-21T04:49:13Z

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 · 2017-05-22T12:10:17Z

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 · 2017-05-22T14:31:14Z

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

mackelito · 2017-05-23T08:02:12Z

@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 · 2017-05-23T08:06:01Z

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

HarelM · 2017-05-23T21:02:26Z

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:

wait for the site to load.
click on the pencil in the right side.
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).

Directives extending NgClass and NgStyle require deprecated Renderer; while other FlexBox directives require Renderer2. Injecting both Renderers causes intermittent `TypeError: _this._renderer.setStyle is not a function` errors. * Refactor the FxBaseDirective to use a StyleRenderer interface, and * Inject only the Renderer instance into the ClassDirective and StyleDirective constructors Fixes #270

tmburnell · 2017-05-25T14:58:08Z

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.

* Revert back to Renderer (from Renderer2); Injecting both Renderers causes intermittent `TypeError: _this._renderer.setStyle is not a function` errors. * Refactor the FxBaseDirective to use a StyleRenderer interface Fixes #270

ThomasBurleson · 2017-05-25T16:32:34Z

Has Pull Request #298

* Revert back to Renderer (from Renderer2); Injecting both Renderers causes intermittent `TypeError: _this._renderer.setStyle is not a function` errors. * Refactor the FxBaseDirective to use a StyleRenderer interface Fixes #270

HarelM · 2017-05-27T09:25:39Z

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

alexfung888 · 2017-06-05T11:09:08Z

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

ThomasBurleson · 2017-06-05T18:34:38Z

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

alexfung888 mentioned this issue Apr 29, 2017

Custom breakpoints - Cannot read property 'mediaQuery' of undefined error #262

Closed

ThomasBurleson added the pr: needs review label Apr 29, 2017

ThomasBurleson added the P0 Critical issue that needs to be resolved immediately label May 19, 2017

ThomasBurleson added this to the v2.0.0-beta.9 milestone May 19, 2017

ThomasBurleson closed this as completed May 20, 2017

ThomasBurleson reopened this May 20, 2017

ThomasBurleson removed the pr: needs review label May 20, 2017

ThomasBurleson mentioned this issue May 21, 2017

DI injects wrong Renderer when using Tabs + Flex-Layout angular/components#4704

Closed

ThomasBurleson added the in-progress label May 21, 2017

HarelM mentioned this issue May 23, 2017

Upgrade angular to 4.0.x IsraelHikingMap/Site#349

Closed

2 tasks

ThomasBurleson mentioned this issue May 25, 2017

fix(flexbox): resolve 'renderer.setStyle()' error #298

Merged

ThomasBurleson added has pr A PR has been created to address this issue and removed in-progress labels May 25, 2017

tinayuangao closed this as completed in #298 May 25, 2017

angular locked and limited conversation to collaborators Jun 5, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

crash with 2.0.0-beta.8 #270

crash with 2.0.0-beta.8 #270

alexfung888 commented Apr 29, 2017

alexfung888 commented Apr 29, 2017

adamdport commented May 11, 2017 •

edited

Loading

mbeckenbach commented May 15, 2017

jotatoledo commented May 19, 2017

ThomasBurleson commented May 19, 2017

ThomasBurleson commented May 20, 2017 •

edited

Loading

HarelM commented May 20, 2017

ThomasBurleson commented May 20, 2017 •

edited

Loading

ThomasBurleson commented May 20, 2017

HarelM commented May 20, 2017

alexfung888 commented May 20, 2017

alexfung888 commented May 20, 2017 •

edited by ThomasBurleson

Loading

alexfung888 commented May 20, 2017

ThomasBurleson commented May 20, 2017

ThomasBurleson commented May 20, 2017 •

edited

Loading

alexfung888 commented May 21, 2017

ktersius commented May 22, 2017

jotatoledo commented May 22, 2017 •

edited

Loading

mackelito commented May 23, 2017

mackelito commented May 23, 2017

HarelM commented May 23, 2017

tmburnell commented May 25, 2017

ThomasBurleson commented May 25, 2017

HarelM commented May 27, 2017

alexfung888 commented Jun 5, 2017

ThomasBurleson commented Jun 5, 2017

crash with 2.0.0-beta.8 #270

crash with 2.0.0-beta.8 #270

Comments

alexfung888 commented Apr 29, 2017

alexfung888 commented Apr 29, 2017

adamdport commented May 11, 2017 • edited Loading

mbeckenbach commented May 15, 2017

jotatoledo commented May 19, 2017

ThomasBurleson commented May 19, 2017

ThomasBurleson commented May 20, 2017 • edited Loading

app.component.ts

./shared/shared.module.ts

Suggestions

HarelM commented May 20, 2017

ThomasBurleson commented May 20, 2017 • edited Loading

ThomasBurleson commented May 20, 2017

HarelM commented May 20, 2017

alexfung888 commented May 20, 2017

alexfung888 commented May 20, 2017 • edited by ThomasBurleson Loading

alexfung888 commented May 20, 2017

ThomasBurleson commented May 20, 2017

ThomasBurleson commented May 20, 2017 • edited Loading

alexfung888 commented May 21, 2017

ktersius commented May 22, 2017

jotatoledo commented May 22, 2017 • edited Loading

mackelito commented May 23, 2017

mackelito commented May 23, 2017

HarelM commented May 23, 2017

tmburnell commented May 25, 2017

ThomasBurleson commented May 25, 2017

HarelM commented May 27, 2017

alexfung888 commented Jun 5, 2017

ThomasBurleson commented Jun 5, 2017

adamdport commented May 11, 2017 •

edited

Loading

ThomasBurleson commented May 20, 2017 •

edited

Loading

ThomasBurleson commented May 20, 2017 •

edited

Loading

alexfung888 commented May 20, 2017 •

edited by ThomasBurleson

Loading

ThomasBurleson commented May 20, 2017 •

edited

Loading

jotatoledo commented May 22, 2017 •

edited

Loading