Repository navigation
ivy: flex-layout directives cause runtime errors with 9.0.0 #32064
Description
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
Reacted by Weibin Luo, Aleš, Nodarii, Reza Kajbaf, Aurélien Dussauge, Benjamin Kindle, Logan Dam and Simon Bobrov
Activity
naveedahmed1 commentedon Aug 8, 2019
@Splaktar should this be reported on Angular repo, just came across this comment by @CaerusKaru
angular/flex-layout#1072 (comment)
Splaktar commentedon Aug 8, 2019
Yes, I believe so, and we can transfer it if needed.
[-]ngStyle.gt-xs not compatible with Angular IVY 9.0.0-next.0[/-][+]ivy: flex-layout directives don't compile with 9.0.0-next.0[/+]Splaktar commentedon Aug 8, 2019
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.Splaktar commentedon Aug 8, 2019
Oh, it looks like I don't have permission to transfer issues to
angular/angular.naveedahmed1 commentedon Aug 8, 2019
Thank you @Splaktar for your reply. I have tried it with 9.0.0-next.1 as well, but it throws same error.
naveedahmed1 commentedon Aug 8, 2019
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.
[-]ivy: flex-layout directives don't compile with 9.0.0-next.0[/-][+]ivy: flex-layout directives cause runtime errors with 9.0.0[/+]8 remaining items
kara commentedon Aug 29, 2019
@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.
naveedahmed1 commentedon Aug 29, 2019
So can you please transfer the issue back to flexlayout repository?
kara commentedon Aug 29, 2019
@mhevery Can you help? (I don't have permissions in the other repo)
Nodarii commentedon Sep 2, 2019
I experience the same issue during migration from 8.2.0 to 9.0.0.next.4. So now this issue blocks migration
Splaktar commentedon Oct 10, 2019
@Nodarii with what version of Flex Layout?
naveedahmed1 commentedon Oct 10, 2019
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 :DNodarii commentedon Oct 11, 2019
@Splaktar It was 8.0.0-beta.26
Splaktar commentedon Oct 11, 2019
@Nodarii I hope that you are unblocked now with
8.0.0-beta.27?klagrida commentedon Oct 13, 2019
I have this error when i run : ng build --prod but ng serve work without any error. i use the latest version of angular : 9.0.0-next.10 . I use 8.0.0-beta.27 for flex-layout.
petebacondarwin commentedon Dec 9, 2019
Please try with the
nextversions of Angular (9.0.0-rc.5) and flex-layout (8.0.0-beta.27)Nodarii commentedon Dec 9, 2019
It works for me
petebacondarwin commentedon Dec 9, 2019
Great. Thanks for letting us know @Nodarii
angular-automatic-lock-bot commentedon Jan 9, 2020
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.