Upgrade to Angular 19#22
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR upgrades the project to Angular 18 by updating dependencies and adapting testing modules to the new Angular HTTP client APIs.
- Replaces HttpClientTestingModule with provideHttpClientTesting and adds provideHttpClient(withInterceptorsFromDi()) in all test modules.
- Updates package.json and angular.json to reflect Angular 18 versions and adjustments to polyfills.
- Applies minor code formatting standardizations in components.
Reviewed Changes
Copilot reviewed 17 out of 17 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/app/user/verify-email/verify-email.component.spec.ts | Updated test providers to use Angular 18 HTTP client APIs |
| frontend/src/app/user/user-settings/user-settings.component.spec.ts | Updated test providers to use Angular 18 HTTP client APIs |
| frontend/src/app/user/reset-password/reset-password.component.spec.ts | Updated test providers to use Angular 18 HTTP client APIs |
| frontend/src/app/user/register/register.component.spec.ts | Updated test providers to use Angular 18 HTTP client APIs |
| frontend/src/app/user/password-forgotten/password-forgotten.component.spec.ts | Updated test providers to use Angular 18 HTTP client APIs |
| frontend/src/app/user/login/login.component.spec.ts | Updated test providers to use Angular 18 HTTP client APIs |
| frontend/src/app/services/language.service.spec.ts | Updated test providers to use Angular 18 HTTP client APIs |
| frontend/src/app/services/auth.service.spec.ts | Updated test providers to use Angular 18 HTTP client APIs |
| frontend/src/app/menu/user-menu/user-menu.component.spec.ts | Updated test providers to use Angular 18 HTTP client APIs |
| frontend/src/app/menu/menu.component.spec.ts | Updated test providers to use Angular 18 HTTP client APIs |
| frontend/src/app/home/home.component.spec.ts | Updated test providers to use Angular 18 HTTP client APIs |
| frontend/src/app/footer/footer.component.spec.ts | Updated test providers to use Angular 18 HTTP client APIs |
| frontend/src/app/app.component.ts | Minor code formatting changes and Angular 18 upgrade support |
| frontend/src/app/app.component.spec.ts | Updated test providers to use Angular 18 HTTP client APIs |
| frontend/package.json | Upgraded Angular dependencies to version 18 |
| frontend/angular.json | Adjusted polyfill configuration for Angular 18 |
Comments suppressed due to low confidence (1)
frontend/src/app/app.component.ts:17
- Angular components require the use of the 'styleUrls' property (an array) instead of 'styleUrl'. Consider renaming 'styleUrl' to 'styleUrls' to align with Angular's component metadata requirements.
templateUrl: "./app.component.html", styleUrl: "./app.component.scss",
There was a problem hiding this comment.
The linting obscures actual changes. Important packages updated are:
angular(.../animations, .../common, .../core) etc.: ^17.3.0 => ^19.2.13typescript: ~5.4.2 -> ~5.8.3ng-bootstrap: ^16.0.0 -> ^18.0.0angular-fontawesome: ^0.14.1 -> ^1.0.0
| "locales": { | ||
| "nl": { | ||
| "translation": "locale/messages.nl.xlf", | ||
| "baseHref": "/nl/" |
There was a problem hiding this comment.
Leaving baseHref here generates a warning:
'baseHref' in 'i18n.locales.nl' may lead to undefined behavior when used with SSR. Consider using 'subPath' instead.
Note: 'subPath' specifies the URL segment for the locale, serving as both the HTML base HREF and the output directory name.
By default, if not explicitly set, 'subPath' defaults to the locale code.
bbonf
left a comment
bbonf
left a comment
There was a problem hiding this comment.
You probably meant to merge this to develop, now that freature/problems-in-db is merged
| language = request.LANGUAGE_CODE | ||
| page = request.path[1:].split("/", 1)[0] | ||
| # pre-rendered version available? | ||
| print('Location:', path.join(language, page, "index.html")) |
There was a problem hiding this comment.
If you want to keep those print statements, maybe add an if settings.DEBUG
There was a problem hiding this comment.
No, these are simply for debugging purposes to find out why the tests are failing. I cannot run the functional tests locally on my machine, so I have to debug on GitHub (which is not ideal).
If you can run the functional tests on your machine, would you be able to help debugging this?
There was a problem hiding this comment.
As far as I'm concerned, feel free to rip out the existing functional test code. When we're ready to write tests, I'd like to use playwright (see https://github.com/CentreForDigitalHumanities/ellp for an example)
There was a problem hiding this comment.
@Meesch is going to give it his best shot. If not, we will rip and tear until it is done.
update functional test base address to refer to port 4200
Meesch
force-pushed
the
feature/upgrade-ng-18
branch
from
dc02f4b to
a4d1b74
Compare
(Drafted until #21 is ready.)
Angular 18 has new, cleaner template syntax, and since the frontend isn't that involved yet, I thought this might be as good a time as any to upgrade, and if we are doing that anyway, we might as well power through to Angular 19.
I've also disabled SSR and removed NgRx (and its associated packages). I don't know why this is in the CookieCutter. We certainly don't need it and it needlessly complicated the application.
This PR should not introduce any functional changes.
If you happen to be working on a frontend feature, I'd be happy to wait until that is merged and solve any merge conflicts.