build: upgrade to Angular and CDK v14

[CaerusKaru]

Also bump TS target to ES2020 and remove deprecated angular.json
option.

[luiz-limber]

up

[michaelfaith]

I made this comment in the other PR, but noticed this one was created too. In case you didn't see it in the other one: for this and future updates, would it be possible to use peer deps similar to how Angular Material does, which includes the next major version as well, to ease the update process. e.g. ^14.0.0 || ^15.0.0 (https://github.com/angular/components/blob/5816a12dfa816e3f340627fdf561658de0e8c970/packages.bzl#L4) It's not usually the case that the next major Angular or CDK versions break this library, so it's likely safe to do and would improve the DX for this interim period between angular and flex layout releases.

I believe that that would mean updating requiredAngularVersion and peerDependencies["@angular/cdk"] in the package.json to both be ^14.0.0 || ^15.0.0 instead of just ^14.0.0.

[michaelfaith]

Any chance we'll get some movement on this soon?

[chamikasandamal]

Can someone please have a look on this check for PR

[PzYon]

Looks like the yarn.lock file needs to be updated: error Your lockfile needs to be updated, but yarn was run with --frozen-lockfile. As this causes thie lint- and build-jobs to fail:

https://app.circleci.com/pipelines/github/angular/flex-layout/291/workflows/0086ee1c-fa87-43db-a469-4fd5edec7c66/jobs/7885

I guess updating the yarn.lock locally and then commiting it will help?

[Sebastian-G]

@PzYon But e.g. in my case it wasn't an issue to build it according to the yarn.lock.
I used yarn v1.22.19 to install, instead of v1.22.17 🤔

➜ yarn install --frozen-lockfile --non-interactive
yarn install v1.22.19
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
[3/5] 🚚  Fetching packages...
[4/5] 🔗  Linking dependencies...
[5/5] 🔨  Building fresh packages...
✨  Done in 155.94s.

PS: You are referring to an different PR #1405

• Is it possible to replay the failed step since it has failed due to a timeout?
• Can we add additional logging to get more information about the reasons?
• Maybe it is possible to check the task id angular-layout-7887-0 with the browser stack account?
• Or the step failed due to an invalid API KEY of BrowserStackLocal e.g. [ERROR] Please provide a valid key, available here: https://www.browserstack.com/accounts/settings
  ❌ Tue Jun 21 2022 21:36:12:3 GMT+0000 (UTC) -- [SUCCESS] You can now access your local server(s) in our remote browser -> https://app.circleci.com/pipelines/github/angular/flex-layout/286/workflows/dcbf4edc-d46a-420b-bfb7-521245994933/jobs/7887?invite=true#step-109-15 seems to be the confirmation that the connection using the API-Key was successful.

[CaerusKaru]

As an update to everyone following here, I have been trying and researching in vain to try and get to the bottom of the BrowserStack issues. Since SauceLabs (and native headless testing) gives us good coverage on their own, I've asked @josephperrott to disable the Required label for tests_browserstack, so that we can merge this PR. Until then, unfortunately, we are frozen (unless some other intrepid soul can suss out the reason for the failure). If this drags on too long, I'll simply remove the tests_browserstack logic so it becomes a passthrough, but I'd prefer to leave it in place so that we can still investigate asynchronously.

[michaelfaith]

@CaerusKaru I wonder if it's that you just need to increase the timeout threshold. Looking at the timings tab of the browserstack test, it seems to be taking 37 seconds (a quarter of the 2 minute timeout period) just to install firefox. If the timeout threshold is set to two minutes, it could just be that the combination of all those installs is taking long enough to breach that threshold before it's finished

[Sebastian-G]

@michaelfaith not sure if the 2 min count in the installation.
The timer seems to start straight after browserstack-tunnel/BrowserStackLocal was started.

See https://github.com/angular/flex-layout/blob/v14/scripts/browserstack/start-tunnel.sh

[michaelfaith]

@michaelfaith not sure if the 2 min count in the installation. The timer seems to start straight after browserstack-tunnel/BrowserStackLocal was started.

See https://github.com/angular/flex-layout/blob/v14/scripts/browserstack/start-tunnel.sh

@Sebastian-G Not sure about that. If you hover over the colored bars it says what each bar represents. I'm just going by that chart.

[michaelfaith]

Just putting this request in the review comments. Can you use ^14.0.0 || ^15.0.0 for this, so delays like this in the future won't be blocking? Also, the engines declaration at the top shouldn't include 12.x node versions anymore, since v14 dropped support for 12.

[CaerusKaru]

where is the error? 🤷🏻‍♂️🤷🏻‍♂️😭😭

Story of my life 🤦

[midgleyc]

Hi, just a post because I'm also interested in this getting merged.

Might the test script not finishing be because it's running in watch mode by default? I remember this being a problem a while back (e.g. angular/angular-cli#978).

I think you can disable watch mode by running ng test --no-watch.

Failing that, you could set singleRun: true in karma.conf.js, but I don't know what else relies on that, or even really what it does.

[CaerusKaru]

@midgleyc The singleRun flag is enabled as part of the test target, and this is the exact same command that runs for the SauceLabs test, which succeeds.

[CaerusKaru]

@josephperrott has disabled the required-ness of browserstack tests, so I'm going to close this PR and open a new one to pick up this change. Will post link when it's ready.

[angular-automatic-lock-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.}