Development: Update to Angular 16 and speedup the build process

[pal03377]

based on #6544

Checklist

General

• I tested all changes and their related features with all corresponding user types on a test server.
• I chose a title conforming to the naming conventions for pull requests.

Client

• Important: I implemented the changes with a very good performance, prevented too many (unnecessary) REST calls and made sure the UI is responsive, even with large data.

Motivation and Context

Angular 16 is here! With it it brings a new Vite development server. This development server is much faster than the current one - which will drastically increase developer productivity! 🚀

Description

First of all, this PR updates Angular to version 16.
Also, we drop BrowserSync because of low usage among developers. Routes in the navbar are now coded as absolute paths, because otherwise they didn't work.

To be able to leverage the new Angular Build capabilities, I had to remove the current Webpack configuration because well, it's specific to Webpack. Instead, now all configuration should happen in angular.json. This was not possible for

• dynamic environment variables and
• merging the i18n json files

Because of this, I introduced a prebuild.mjs script. It creates the merged i18n json files as well as an environment.override.ts file to customize some variables.

Because the webpack bundle size analyzer is now dropped from the webpack config (which doesn't exist anymore), I integrated it as a separate step of the production build.

Steps for Testing

• pull from the branch
• npm install (you might have to delete node_modules first if it errors)
• start the server and the client
• try the live reload functionality
• click around in the web app to see whether anything is broken

Running the tests locally on Windows

Does not apply any more, it should work just fine!
Currently, there is an issue with jest-preset-angular which causes the tests to fail on Windows. Until a proper fix is generally available, you can manually replace node_modules/jest-preset-angular/build/utils/ngcc-jest-processor.js before running the test commands with this file: https://gist.github.com/pal03377/a3d85176de1b2ac54a0679283e084fe9

Client test justification

Usually, you would expect an update to roughly keep all tests intact. However, ~60 of 5400 client tests broke with this update. Because of this, this PR includes a bunch of in-part random-looking changes to client tests. There are good reasons behind those changes, but they might not be immediately obvious. The following table helps explaining. Use it to look up the reason for a change when you don't understand it from the code.

You don't have to read it all, just look up the file when you are wondering about it in code review.

Here is a table of the changes (pdf): Angular 16 Build Client Test Table.pdf

Review Progress

Code Review

• Code Review 1
• Code Review 2

Manual Tests

• Test 1
• Test 2

Screenshots

Screen recording of me removing and re-adding the refresh button on the course page. Previously, my build times were around 16x as long (4x with some build speed improvement tricks):

artemis-client-build-angular-vite.mp4

[tobias-lippert]

Tested again locally, running tests on windows works now flawlessly without any workaround

[julian-christl]

Code looks good

[JohannesStoehr]

Tested locally and on TS2.
Code changes look good as well

[tobias-lippert]

Tested locally and on ts2. Everything, especially navigating works.
Latest code changes look good.

[krusche]

Code looks good 👍