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)
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
nextversions 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+BreakpointObserverService 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
DefaultStyleDirectivein the stack trace is something fromflex-layout, not Angular core, so that’s specific to the lib.Regarding this comment:
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.