FOM Upgrades - Migrate to Angular 18

[ianliuwk1019]

Angular:

• FOM is of version Angular 15 and this PR (feat:#712 migrate angular 17 #731) is intended for stage 1 Angular upgrade to bring FOM up to Angular v17 as a stable working application. Previous attempt to upgrade to Angular v18 the application breaks, although lib dependencies can be upgraded to v18, but the app breaks after application starts up. Upgrade to Angular 18 will need more details change/adjustment and verification.

• Upgrade target version: v18

• Latest Angular version: v19. At the moment, we can't upgrade to this version as other dependencies are playing catch-up and no newer version for us to upgrade.

Acceptance Criteria

• Angular is upgraded to 18.
• FOM app is working with backend.

Additional context

• Add any other context about the task here.
• Or here

[ianliuwk1019]

Initial attempt from v17 to v18 is not working (build ok) on starting up. Error messages are related to dependency injection (probably will be more error later on if this is fixed). However, it is not clear why there is issue from Angular's dependency injection (while v17 is working); for now probably can assume the way using dependency injection has changed.

As my understand from reading new features offered from Angular 18, Angular 18 is probably another milestone version for Angular; it comes with quite some new stable features introduced (plus some from Angular 17 as well):

• new control flow (@if/@for) to the template.
• interesting new feature (@defer) deferable views (for lazy load template).
• many new powerful/very performance efficient/convenient 'signal'-related features (like Vue's reactive "ref" and much more than that)
• new way of two-way binding (signal related)
• big experimental feature in Angular 18 (can get rid of zone.js, basically the change-detection behind the scene).
• many other small things...

My understanding is old way is still compatible but likely like to take the benefit the Angular 18 and up offered. So FOM might be better off using some new features (to rewrite template html or template javascript logic) when next time we (have time) migrate to Angular 18 or up if FOM still stays for few years.

@basilv