Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade webapp to Angular 16 #8237

Closed
Tracked by #88
latin-panda opened this issue May 12, 2023 · 7 comments
Closed
Tracked by #88

Upgrade webapp to Angular 16 #8237

latin-panda opened this issue May 12, 2023 · 7 comments
Assignees
Labels
Dependencies Update the project's dependencies/libraries Type: Technical issue Improve something that users won't notice
Milestone

Comments

@latin-panda
Copy link
Contributor

latin-panda commented May 12, 2023

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 latin-panda added Type: Technical issue Improve something that users won't notice Dependencies Update the project's dependencies/libraries labels May 12, 2023
@latin-panda latin-panda added this to the 4.3.0 milestone May 12, 2023
@latin-panda latin-panda self-assigned this May 16, 2023
@latin-panda
Copy link
Contributor Author

Typescript 5 blog post

@latin-panda
Copy link
Contributor Author

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
Copy link
Contributor Author

latin-panda commented May 17, 2023

Blocked until these libs release a version compatible with Angular 16

@latin-panda
Copy link
Contributor Author

latin-panda commented Jun 9, 2023

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

@latin-panda latin-panda removed this from the 4.3.0 milestone Jul 25, 2023
@latin-panda
Copy link
Contributor Author

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

@latin-panda
Copy link
Contributor Author

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 ngaruko self-assigned this Sep 8, 2023
@ngaruko
Copy link
Contributor

ngaruko commented Sep 11, 2023

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

Message tab image
Contact tab > creating/editing contacts image
report tabs > creating editing reports image
Tasks tabs > tasks are created and can be completed image
Targets tab image
Warnings when existing form before completion image

@garethbowen garethbowen added this to the 4.5.0 milestone Sep 11, 2023
latin-panda added a commit that referenced this issue Sep 14, 2023
- Upgrades webapp's angular to v16
- Upgrades Typescript, rxjs, tslibs, ngxbootstrap versions in order to support Angular 16.
- Replaces Bootstrap's accordion with Angular Material's. 
- Removes defaultProject from angular.json, this property is deprecated.
- Overrides styles of Bootstrap 4, patching, so app looks the same as before in the new design and old design (action bar and filters)
- Overrides Angular Material's fonts to use the Noto fonts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Dependencies Update the project's dependencies/libraries Type: Technical issue Improve something that users won't notice
Projects
Status: Done
Development

No branches or pull requests

3 participants