angular: ivy: flex-layout directives cause runtime errors with 9.0.0

Bug Report

What is the expected behavior?

flex-layout should support Angular IVY

What is the current behavior?

When compiling angular app that uses flex-layout and has IVY enabled, the app compiles successfully, but when running in browser, it doesn’t display anything on screen and throws below error in developer console:

(2,25): Cannot invoke an expression whose type lacks a call signature. Type '{ ngStyle: any; (Missing): number; }' has no compatible call signatures.
src/app/test/mycomponent.component.html(2,25): Cannot find name 'ngStyle'.
src/app/test/mycomponent.component.html(2,25): Cannot find name 'xs'.

What are the steps to reproduce?

Adding below code to an app using flex-layout, should throw the above error:

<div id="myDiv" [ngStyle.gt-xs]="{'margin-left.px':-16,'margin-right.px':-16,'margin-top.px':-16}">
</div>

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

Angular CLI: 8.3.0-next.0
Node: 10.16.0
OS: win32 x64
Angular: 9.0.0-next.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.803.0-next.0
@angular-devkit/build-angular              0.803.0-next.0
@angular-devkit/build-optimizer            0.803.0-next.0
@angular-devkit/build-webpack              0.803.0-next.0
@angular-devkit/core                       8.3.0-next.0
@angular-devkit/schematics                 8.3.0-next.0
@angular/cdk                               8.1.2
@angular/cli                               8.3.0-next.0
@angular/fire                              5.2.1
@angular/flex-layout                       8.0.0-beta.26
@angular/http                              8.0.0-beta.10
@angular/material                          8.1.2
@angular/material-moment-adapter           8.1.2
@angular/pwa                               0.803.0-next.0
@ngtools/webpack                           8.3.0-next.0
@nguniversal/module-map-ngfactory-loader   8.1.1
@schematics/angular                        8.3.0-next.0
@schematics/update                         0.803.0-next.0
rxjs                                       6.5.2
typescript                                 3.4.5
webpack                                    4.38.0

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 8
  • Comments: 20 (15 by maintainers)

Most upvoted comments

I experience the same issue during migration from 8.2.0 to 9.0.0.next.4. So now this issue blocks migration

Great. Thanks for letting us know @Nodarii

It works for me

Please try with the next versions of Angular (9.0.0-rc.5) and flex-layout (8.0.0-beta.27)

I ended up removing Flex-Layout, from my project and now using to CSS Flexbox + BreakpointObserver Service from Angular Material, since I’m already using Angular Material. One less dependency and life is peaceful 😄

@mhevery Can you help? (I don’t have permissions in the other repo)

@naveedahmed1 DefaultStyleDirective in the stack trace is something from flex-layout, not Angular core, so that’s specific to the lib.

Regarding this comment:

Any issue with compiling with Ivy is strictly an Ivy issue, as it’s meant to be backwards.compatible with ViewEngine.

That’s actually not true. There are some minor changes that will require application updates, not Ivy updates. These will mostly be accomplished through automated schematics for version 9, but until those are ready, you may see some errors that are not Ivy bugs but expected changes.

The app compiles successfully but when running in the browser it throws the above error in developer console, and nothing is displayed on the screen.

Thank you @Splaktar for your reply. I have tried it with 9.0.0-next.1 as well, but it throws same error.

I don’t know if things are better in 9.0.0-next.1, but it just came out if you want to try it.