chore(deps): migrate to angular version 18

[sergeleger]

PR Goal?

Upgrade Angular from version 17 and 18 and the associated Nx dependencies from 18 to 19.

Fixes?

Does not close an open issue, but the upgrade did introduce a few issues which have been addressed in this PR:

• Sass version 1.77.6 warns of deprecated @import; fixed by switching to the new module system and the @use statement.
• The included material UI version changes the ARIA role of buttons that are members of a button group. Instead of the default role=button they now use role=radio. Many web-component Cypress tests were failing since the appropriate elements could not be found.

Feedback sought?

My first PR in this project so anything of note that I might have missed. Also, not familiar with ReadAlong, so a second review of the application would be useful.

Priority?

Medium urgency? It blocks my next task of upgrading to Angular 19. Due to the Sass and Material UI comments above, it should block any new feature development.

Tests added?

None.

How to test?

All existing tests are passing (with some flakiness). A manual test of the application would be appreciated to ensure I did not miss anything important.

Confidence?

Fairly confident.

Version change?

No new code or API changes, so a patch at a minimum (1.5.3). Unless, there's a need to reflect a major upgrade of Angular as a minor upgrade (1.6.0).

[semanticdiff-com]

Review changes with  

Changed Files

File	Status
packages/studio-web/tests/test-commands.ts	95% smaller
package.json	66% smaller
packages/web-component/src/scss/modules/_index.scss	61% smaller
.github/workflows/end-to-end-tests.yml	0% smaller
package-lock.json	Unsupported file format
packages/ngx-web-component/package.json	0% smaller
packages/studio-web/src/assets/bundle.js	Unsupported file format
packages/studio-web/src/main.ts	0% smaller
packages/studio-web/tests/studio-web/check-page-1.spec.ts	0% smaller
packages/studio-web/tests/studio-web/make-read-along.spec.ts	0% smaller
packages/web-component/src/scss/_shame.scss	0% smaller
packages/web-component/src/scss/base/_base.scss	Unsupported file format
packages/web-component/src/scss/base/_index.scss	0% smaller
packages/web-component/src/scss/libs/_index.scss	0% smaller
packages/web-component/src/scss/modules/_annotations.scss	Unsupported file format
packages/web-component/src/scss/modules/_controls.scss	Unsupported file format
packages/web-component/src/scss/modules/_overlay.scss	Unsupported file format
packages/web-component/src/scss/modules/_pages.scss	Unsupported file format
packages/web-component/src/scss/modules/_settings.scss	Unsupported file format
packages/web-component/src/scss/modules/_slots.scss	0% smaller
packages/web-component/src/scss/states/_clicked.scss	Unsupported file format
packages/web-component/src/scss/states/_index.scss	0% smaller
packages/web-component/src/scss/styles.scss	Unsupported file format
packages/web-component/src/scss/utilities/_colors.scss	Unsupported file format
packages/web-component/src/scss/utilities/_extends.scss	Unsupported file format
packages/web-component/src/scss/utilities/_fonts.scss	Unsupported file format
packages/web-component/src/scss/utilities/_functions.scss	Unsupported file format
packages/web-component/src/scss/utilities/_index.scss	0% smaller
packages/web-component/src/scss/utilities/_mixins.scss	Unsupported file format
packages/web-component/src/scss/utilities/_typography.scss	Unsupported file format

[github-actions]

PR Preview Action v1.6.1
Preview removed because the pull request was closed.
2025-05-16 19:58 UTC

[joanise]

This looks great, thanks! And the app seems to work well.
I have a question about compatibility with old browsers: if I understand scss correctly, all these .scss files get compiled to plain old CSS in the build process, so the change from @import to @use is only seen by the compiler, not the user's browser. Which means this should have no impact on being able to read new readalongs on old devices. As long as my understand is correct, I think we can be ready to merge this PR.

[sergeleger]

Yes, that's my understanding also, the browsers only see the compiled output.

While looking at Angular 19, I noticed that I forgot to update the dependencies of angular-demo to angular 18. I can add those now before merging, or it will get Angular 19 directly when that work is done.

What is the merge strategy of the project? I would recommend a squash-merge, since the individual commits don't amount to much be themselves (and are in a broken state).

[joanise]

This is great, thank you!