FOM Upgrades - Migrate to Angular 18 (or 19)

[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 or 19(is other libs support).
• FOM app public/admin frontends are working with backend.

Additional context

• Angular Upgrade Guide might be useful for initial attempt.
• 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

[ianliuwk1019]

• The upgrading to Angular 18 on public side is smooth (branch: /feat/732-fom-upgrades-to-angular-18-or-19). Once all Angular packages are upgraded to v18 (using ng update) public side can be up and running with no error.

However, the Angular 18 upgrade on admin side, after bump up all packages to Angular 18, encountered some trouble on Angular's dependency injection. The error log below happens when opening the admin side and Angular starts to bootstrap the app.

	core.mjs:7195 ERROR RuntimeError: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`. Find more at https://angular.dev/errors/NG0203
		at injectInjectorOnly (core.mjs:1092:11)
		at ɵɵinject (core.mjs:1102:40)
		at Object.factory (core.mjs:28029:44)
		at core.mjs:3136:35
		at runInInjectorProfilerContext (core.mjs:867:5)
		at R3Injector.hydrate (core.mjs:3135:11)
		at R3Injector.get (core.mjs:3009:23)
		at definition.getStandaloneInjector (core.mjs:28046:27)
		at ComponentFactory.create (core.mjs:16182:53)
		at _ApplicationRef.bootstrap (core.mjs:31826:38)
	handleError @ core.mjs:7195Understand this error
	main.ts:80 RuntimeError: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`. Find more at https://angular.dev/errors/NG0203
		at injectInjectorOnly (core.mjs:1092:11)
		at ɵɵinject (core.mjs:1102:40)
		at Object.factory (core.mjs:28029:44)
		at core.mjs:3136:35
		at runInInjectorProfilerContext (core.mjs:867:5)
		at R3Injector.hydrate (core.mjs:3135:11)
		at R3Injector.get (core.mjs:3009:23)
		at definition.getStandaloneInjector (core.mjs:28046:27)
		at ComponentFactory.create (core.mjs:16182:53)
		at _ApplicationRef.bootstrap (core.mjs:31826:38)

Although spending quite some time reviewing some possible components and services for dependency injection setup for Angular, still could not identify where the causes are. Debugging the code/log is also difficult, at least so far I can't identify useful information from the debug console.

This is a major hurdle if we want to upgrade to Angular 18+.
Since Angular 18+, the Angular team has put on a strict check on dependency (not on Angular 17), so this problem starting to show up on v18. Our FOM admin code so far I don't seem to find a particular service or component that might have cause this problem. It could also be on the third party libraries used by admin side frontend that has the dependency injection issue. We might like to upgrade other third party libraries to a compatible level to see if admin frontend still run into a problem.

• When working on upgrading, also notice that, up until Angular 17, the package "ngx-dropzone": "^3.1.0" is still working. But this library is now deprecated and we should not be using and need to find alternative. This package is for handling frontend drag-and-drop file upload. We will need to at the same time, replace this library as part of the upgrade.

I am not certain at this moment but we probably can also first try to remove this package and its associated frontend code first to identify if this package also is the cause of the first issue (dependency injection issue) described above.

[ianliuwk1019]

Move this ticket back to FOM backlog after discussion.

[ianliuwk1019]

PR for FOM upgrade to Angular 19: #849.
This PR also remove the use of Amplify's amazon-cognito-identity-js' (affects FOM token parsing)