Angular v13 Upgrade

[soori-reddy]

Bug Report

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

Providing a StackBlitz (or similar) is the best way to get the team to see your issue.

• StackBlitz starter using latest npm nightly release:

What is the use-case or motivation for changing an existing behavior?

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

Is there anything else we should know?

[ianvink]

Thank you for your wonderful project and all the work you did. We very much appreciate it. Looking forward to 13.0.0 support of this very important project

[epelc]

@CaerusKaru any eta on angular 13 support?

[CaerusKaru]

I'm actively investigating this, but ideally we'd move to the new APF v13 and start vending partial compilation artifacts just like Components and the framework. This is nontrivial work but I'm setting aside some time for it this week. No ETA as of yet though.

[michaelfaith]

@CaerusKaru thank you!

[pantonis]

until it gets updated for angular v13 will it still work without any issues with angular and material v13?

[mhaberl]

@pantonis It does not work with angular v13 at the moment

edit: build can be done using the --force option

[Stexxen]

@pantonis If you attempt to upgrade you will receive this

Package "@angular/flex-layout" has an incompatible peer dependency to "@angular/cdk" (requires "^12.0.0", would install "13.0.0").
✖ Migration failed: Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
You can use the '--force' option to ignore incompatible peer dependencies and instead address these warnings later.

[michaelfaith]

It's working fine for us with Angular 13. You can just pass the --force flag in to push the migrations through. And we haven't seen any issues building with flex-layout 12.0.0-beta.35 and Angular 13

[pantonis]

@mhaberl are you sure about this? check @michaelfaith last comment.

[mhaberl]

@pantonis my mistake - it does build with --force flag

[pantonis]

@pantonis my mistake - it does build with --force flag

Please remove your first comment to avoid confusing others reading this issue

[DaveSharman]

Does this by chance with with the version 7 rxjs? can we use --force here as well?

[michaelfaith]

I updated rxjs on my v13 project to 7.4.0, since that's what's generated from a new angular app, and it worked fine with flex-layout 12.0.0-beta.35. At least with how we're using it.

[Stexxen]

Please have a look at the patch that @CaerusKaru is working on https://github.com/angular/flex-layout/pull/1369/commits/6d34c9856ec13972d4c8ca6d2438adb3584517a7

Using --force, may make it compile, but all these changes (and maybe more) are required to truely work with v13, so perhaps best to wait...

[michaelfaith]

Well, correct me if i'm wrong, but all those changes aren't making the functionality of the library work any better. But rather it's so that the library can be published with partial Ivy, instead of View Engine. Previously, it was published with Ivy turned off, and so ngcc is processing it, transforming it into a form that it can use, and then it's good. Changing to Ivy is forcing it to conform to the new Angular Package Format, which is where a lot of that work seems to be tied to. So yes, there's a ton of benefits to what's being done there, because people can then take advantage of the improvements of the new package format and the greater build efficiencies. But it's not fixing any broken functionality of the library itself (as far as i can tell). So if people are asking "does the library still work", yes it does. Is it ideal from an efficiency perspective, no. But if they need to get something out the door, the library still works as designed. Right?

[clark-stevenson]

IMO If you are upgrading to 13 which is a week old or so, and you have a project that uses any library dependencies, let the authors have some time to consider a strategy and push a compatible solution. If the dependency isn't ready, and the tooling is moaning, there is little value in trying to jump the gun. Each to their own tho of course!

[michaelfaith]

Yeah, that's a fair statement for sure. And i agree. I just want to be clear in the language around it, so people know what to expect, and what will and won't work.

With that said, this is hyperbole:

and the tooling is moaning

The tooling isn't doing anything more now than it was already doing in v12. It's just not doing less, like it could be.

[wratho]

couldn't they just release a beta.36 to increase the compatibility with 13 if the functionality isn't changing much? Just a thought. doing --force feels bad

[houcemlaw]

Any chances for a sooner angular 13 support release ? Will there be a future strategy to make this package inline with further upgrades ? This is becoming a big hurdle for those who want to upgrade each time a new upgrade is available. --force is not an option. A smooth upgrade will avoid you surprises.

[CaerusKaru]

I know this may come as a surprise, but upgrades are not mandatory. There's nothing saying that you must upgrade tomorrow versus a week from tomorrow, except that you alone would like a new feature or change previously not available. Security patches, for instance, are always backported to supported versions. That being said, --force by definition is an option; whether it is viable for you or not is also up to you alone.

Now all that aside, we are working hard on supporting v13 and APF 13. We have made significant progress in stabilizing the build and are in the process of validating the artifacts through extensive testing. The last thing we want for such a dramatic change is to get it wrong.

Some have suggested just cutting an ordinary v13 release without APF 13. I'd like to avoid that because then we would have to postpone introducing the new package format until v14 at the earliest, and we are incredibly close to getting it right as it is.

I understand you're all eager to upgrade; I'd like to ask for your patience while we get this wrapped up. Generally speaking, we like to get these things done in line with Angular releases, where we release no later than one week after the framework does. That slipped in this case due to the aforementioned APF/partial compilation changes. Thankfully we don't expect too many of those over time, and usually we meet our target.

[ianvink]

Your efforts to support the community are very much appreciated and are valuable.

Thank you.

[michaelfaith]

Your efforts to support the community are very much appreciated and are valuable.

Thank you.

Seconded. Thanks for all the hard work 👏

[houcemlaw]

Of course it is an option and upgrading is also an option (to a certain extent). But what I wanted to say is that it is starting to be frustrating how depending on this package could prevent you from upgrading untill it is time to upgrade. I really appreciate your valuable efforts towards a more stable and cutting edge framework and would be very grateful if we could catch the upgrade while it is hot. Obviously nothing is urging and upgrades could wait. But the eagerness wins all the time when it comes to upgrading angular while one has built a whole framework around it. If something critical would happen in your framework (which relies on angular + this package) the sooner you're aware of it the better you handle it. As I said, I really appreciate your efforts and will happily upgrade when it is time to upgrade.

[CaerusKaru]

Here's an end-of-week update for everyone:

Thanks to the efforts of @alan-agius4 and @devversion, we have a PR that's in very good shape. The artifacts and the demo app both look great after extensive testing in multiple browsers. However, our unit test suite is failing in all contexts, and we're not really sure why. It may have something to do with running with Ivy artifacts in JIT mode instead of ViewEngine artifacts, but again it requires further investigation. I'm going to consult with the framework team next week to reach a resolution (either fixing our setup, or possibly patching framework should that be needed), and then we can hopefully close this out soon after.

[michaelfaith]

Thanks for the update. Much appreciated.

[CaerusKaru]

Tuesday update (will update whenever I have news):

After an extensive debugging session (much thanks @AndrewKushnir), we've determined the remaining issue is likely not a framework issue, but rather a structural issue in our library code as the result of our new build system. This leaves us with some unenviable options, which we're going to discuss tomorrow and hopefully develop next steps.

One option we are strongly considering is releasing a v13 version as an alpha release to unblock people, but without moving the latest tag (I'm uncertain whether that would appease ng update, so will get clarity on that as well). This is because it is highly likely the artifacts themselves are unaffected, and only the tests are currently broken – though notably not the vast majority of them.

[CaerusKaru]

Late night update: we've done it! And by we, I mean almost wholly @alan-agius4. Our PR is green on all counts, with the exception of merging back our old demo-app (which has been tested, but in a separate track). Tomorrow we'll get the Angular GitHub admins to update our repo to accommodate the new PR structure, and then we should be good to merge. Thank you all again for your continued patience. We're almost at the end of the road!

[CaerusKaru]

Wednesday update: the PR has been merged, meaning that users of Angular v13 may install the nightly build of the library to unblock adoption until the full release.

And now the less-than-great news: due to the US holiday tomorrow, the decision has been made to postpone release until next Monday. We do plan to roll it out on Monday without further delay, however, so we're almost there. I'll post an update here once the release is live on NPM.

Happy holiday to those observing!

[michaelfaith]

Enjoy your holiday, and thanks for all the hard work.

[CaerusKaru]

NPM release complete: https://www.npmjs.com/package/@angular/flex-layout. If you experience issues with the release, please open a separate ticket documenting the problem.

Thank you all again for your patience!

[houcemlaw]

At long last! Thank you for your commitment and valuable effort!

[ianvink]

Tested it on a big system and it's working great so far. thanks!

[michaelfaith]

Really appreciate all the hard work that went into this. Thanks to all involved!

[angular-automatic-lock-bot[bot]]

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