Upgrade frontend from AngularJS to Angular

[Ghislain Hachey]

AngularJS has reached end of life support. And while an app built on this technology will not stop working in the immediate future, it is better to plan and start a migration as soon as possible. The scope of work requirements include:

• A simple plan of action for a complete migration of the frontend from AngularJS to the latest Angular. For example, a 4-5 phases approach can be detailed within no more than a single page with simple bullet points. The entire workplan should be achievable in a flexible amount of time (i.e. as little as within a given year or over a few years)

• Simplification of the frontend, i.e.

  • Reducing dependencies to the strict minimum,
  • Adopting newer simpler better supported tools,
  • Not developing custom code if there is a widely used, mature and well supported open source library that can do the same thing
  • Prefer the use of “Vanilla” Material User Interface components to develop a beautiful modern User Interface over custom templates and themes available online.
  • Eliminating dead code or code of features never used

• Simplify the frontend tooling (build tool). Currently a mixture of npm, Grunt and Bower is used some of these no longer supported. This needs cleaning up.

• Create a brand new frontend project based on the latest version of Angular and Angular Material. This new project will be a shell encapsulation the older AngularJS application in which there will be old pieces and new pieces working together in a path towards a complete migration in phases.
• Implement the "frame" of the application: Log in / log out flow, main menu and navigation. That part would pave the way for the architecture of everything else, which could then be migrated "screen by screen" or "feature by feature".
• Work on this frontend upgrade shall be committed to a dedicated Git branch called “angular-upgrade”. While development in the currently used system (branch “develop”) may continue, the works would be minor refinements at a very slow pace. Any new works in “develop” branch should be ported to the new angular-upgrade.
• A simple developer guide (bullet point directions) shall be developed to launch and test the new upgraded system to be develop in the branch angular-upgrade.

‌