Upgrade webapp to Angular 16

[latin-panda]

Describe the issue
Angular 16 is ready and with great features, including performance improvements; see blog post.

We need to find out if any breaking change affects us and do a before and after performance comparison.

Reference of previous upgrade: #7992 (comment)

[latin-panda]

Typescript 5 blog post

[latin-panda]

A couple of good to know:

Required imports

@Component(...)
export class App {
  @Input({ required: true }) title: string = '';
}

Passing router data as component inputs

const routes = [
  {
    path: 'about',
    loadComponent: import('./about'),
    resolve: { contact: () => getContact() }
  }
];

@Component(...)
export class About {
  // The value of "contact" is passed to the contact input
  @Input() contact?: string;
}

Subscription to ngDestroy - even from outside the component

import { Injectable, DestroyRef } from '@angular/core';

@Injectable(...)
export class AppService {
  destroyRef = inject(DestroyRef);

  destroy() {
    this.destroyRef.onDestroy(() => /* cleanup */ );
  }
}

Self-closing tags for components
<super-duper-long-component-name [prop]="someVar"/>

[latin-panda]

Blocked until these libs release a version compatible with Angular 16

• https://www.npmjs.com/package/ngx-bootstrap - released
• https://www.npmjs.com/package/@angular-builders/custom-webpack - released and not blocking

[latin-panda]

Router guard interfaces are deprecated and we need to migrate to functions

[latin-panda]

Won't be worked in Q3. Prob in Q4
cc: @michaelkohn I've moved this issue back to ToDo for now.

[latin-panda]

Performance

Build time

• Angular 15:
  • npm run build-dev Best: 3m 01s — Average: 3m 07s — Worst: 4m 02s
• Angular 16:
  • npm run build-dev Best: 1m 19s — Average: 2m 5s — Worst: 2m 37s

Size

• Angular 15:

Initial Chunk Files	Raw Size
main.js	11.93 MB
polyfills.js	1.04 MB
styles.css	572.33 kB
scripts.js	152.52 kB
runtime.js	6.99 kB
Initial Total	13.68 MB

• Angular 16:

Initial Chunk Files	Raw Size
main.js	12.30 MB
styles.css	537.11 kB
polyfills.js	230.55 kB
scripts.js	152.52 kB
runtime.js	6.99 kB
Initial Total	13.20 MB

Unit tests time

• Angular 15:
  • npm run unit-webapp total: 2m 23s
• Angular 16:
  • npm run unit-webapp total: 1m 40s

See here performance of previous angular migrations when we had grunt.

[ngaruko]

Tested a few functionalities with chrome, android 13, 12, and 10 - and it all looks great and same as master.

Message tab

Contact tab >

creating/editing contacts

report tabs >

creating editing reports

Tasks tabs >

tasks are created and can be completed

Targets tab

Warnings when existing form before completion