Chore(core)!: Dependency major updates

[chrismclarke]

PR Checklist

• PR title descriptive (can be used in release notes)

TODO (follow-ups)

• Migrate angular cli to use esbuild
• Additional dep updates (outlined below)
• Android gradle updates

Breaking Changes

• Core updates may have knock-on effects for how some components are displayed (pending review).
• Developers expected to use node 18+ (previously 14+). This may or may not show up as an error depending on OS (referenced in package.json but handling differs for windows/linux/mac as well as node manager, ide, plugins etc.)

Description

Various core depencies updated. Major version bumps for:

Web

• Angular v15 -> v17
• ngx-matomo v1 -> v6
• angular/fire v7->v17(alpha) (convention change v8 == v16 to align with angular version, so only 2 major bump). v17 still alpha so worth testing functionality, required for compatibility with ng17
• firebase v9->v10
• ngx-extended-pdf viewer v16->v18
• ngx-lottie v7->v10
• ionic-angular v6->v7
• ng2-ui-slider v1->v2
• rxdb v13->v14
• katex v0.15->v0.16
• Minor version bumps on all other packages

Not Updated
Major updates, but independent to angular so recommend follow-up

• IntroJS v3->v7
• Marked v2->v11
• Swiper v8->v11

Android

• Capacitor plugin minor version bumps

Not Updated

• Gradle and other Android core

Dev Notes

• Can use signals, standalone components and template control syntax. At this point not auto-migrating, more opt-in.
  https://blog.angular.io/angular-v16-is-here-4d7a28ec680d
  https://blog.angular.io/introducing-angular-v17-4d7033312e4b

• I've been through Angular update guuide, Items that stand out for me are listed below (have attempted/assumed fixes for all):

• Update your code to use ViewContainerRef.createComponent without the factory resolver. ComponentFactoryResolver has been removed from Router APIs.

• Due to the removal of the Angular Compatibility Compiler (ngcc) in v16, projects on v16 and later no longer support View Engine libraries.

• entryComponents is no longer available and any reference to it can be removed from the @NgModule and @component public APIs.

• Make sure that you are using a supported version of node.js before you upgrade your application. Angular v17 supports node.js versions: v18.13.0 and newer

• In future may want to enforce specific code styles/practices, but recommend only to do so if we have automated migration and linting first

• I removed the ngx-color dependency which used to be used for a color-picker as part of custom theme editor, but appears to be no longer in use

• I also did my best to look through changelogs on all major package updates, and either address where quickly possible or note in review notes as something to check

Author Notes

• If running locally it is now expected that Node v18+ in use. This isn't strictly enforced (so not marking as breaking change), but I've updated the readme accordingly.

• If receiving errors when installing it might be a case that the local node_modules folder requires deletion first (I had to due to https://github.com/angular/angular-cli/issues/25377, but hopefully the updated yarn.lock file should mean others don't)

Review Notes

A lot of core updates here, so really want to check all core functionality including:

• Template loading/navigation
  more complex templates load/navigate as expected as a few changes made to router handling

• Template component UI
  potential breaking changes, not yet addressed from https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md#version-7x. E.g. can see in test visual some button sizing changes

• Firebase (login)

• Matomo analytics

• PDF viewer
  Haven't checked changelog, but comp-pdf visual test appears to be showing different pages so could be a regression

• Compodoc generated docs
  Untested but assume compatible with ng 17

• Lottie animations

• Native functionality ( login)
  Mostly to ensure interoperability with dep updates (e.g. firebase). I

• noui slider component

• rxdb functionality
  (reactive memory, used in dynamic data service and data-items component/remote asset service). Have fixed imports/method names according to https://rxdb.info/releases/14.0.0.html but harder to check deeper immutability and object return type changes. Additionally there are data migrations required which I've implemented, but would be good to test knock-on (appears to be a ${deploymentName}_user collection, but not sure if actually used) - ideally would be good to have a local state that uses the persistedMemory adapter, and just check things still appear as expected when changing to pr branch. From what I can tell the changes should all be internal (changes to metadata fields like _rev, which used to be automatically populated to schema json but now no longer present; so assume implied somewhere else in rxdb codebase)

• Markdown rendering (only mention in changelog is copy-tex css which I don't see referenced anywhere so hopefully fine)

Git Issues

Closes #

Screenshots/Videos

If useful, provide screenshot or capture to highlight main changes

[github-actions]

Visit the preview URL for this PR (updated for commit 07194ed):

https://idems-debug--pr2157-core-ng-17-t4chc38q.web.app

_{(expires Wed, 13 Mar 2024 15:16:21 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: f2bfd21fc73bf25db0e74968614b72bee30e3476}

[github-actions]

Visual Test Summary
new : 0
different : 334
same : 0

Largest Differences
1 | 47.9% | comp_form
2 | 30.7% | feature_tile
3 | 26.1% | comp_pdf
4 | 23.4% | debug_pop_up_return
5 | 8.9 % | feature_number_selector
6 | 8.7 % | example_widget_nesting_audio
7 | 8.3 % | comp_square_button
8 | 8.1 % | example_widget_audio_def
9 | 5.7 % | debug_tile_text
10 | 5.2 % | debug_go_to_url

Download Link
https://nightly.link/IDEMSInternational/parenting-app-ui/actions/runs/8082629090

Run Details
https://github.com/IDEMSInternational/parenting-app-ui/actions/runs/8082629090

[jfmcquade]

Thanks, @esmeetewinkel.

I've pushed changes to fix the first 3 issues you mention:

• slider component
• combo box text input
• console error: Acquiring an exclusive Navigator LockManager failed

Regarding the yellow warnings logged in your final screenshot:
I'm only getting the RxDB dev-mode warning one:

Are there any steps you take that cause those warnings to appear, e.g. navigating to a particular template?
I've definitely seen the warnings related to ODK before, I think we just have to accept them for now as they are related to the ODK package we're using.

As far as the 3 warnings regarding "CommonJS or AMD dependencies" are concerned, @chrismclarke could you advise? Should I be adding these packages to allowedCommonJsDependencies in angular.json? Or should we be looking to move away from these packages altogether?

[chrismclarke]

Regarding the yellow warnings logged in your final screenshot: I'm only getting the RxDB dev-mode warning one:

During compilation I expect you probably see a lot of warnings coming from ./src/app/shared/components/template/components/odk-form, but these won't always appear in the console depending whether it is first load or a reload action.

There's not a huge amount we can do about all the odk warnings at this stage. It's 3rd party code that we've essentially copy-pasted into the repo, so not going to conform to our syntax guidelines. The best solution would probably be to get it all running as part of a standalone repo and just importing the compiled version from there, that's very far down a list of priorities I already have on a separate project I'm working on (PICSA), so I think possibly not worth too much time investment from here.

As far as the 3 warnings regarding "CommonJS or AMD dependencies" are concerned, @chrismclarke could you advise? Should I be adding these packages to allowedCommonJsDependencies in angular.json? Or should we be looking to move away from these packages altogether?

Yes you simply need to add the names of the allowedCommonJsDependencies in the angular.json file. CommonJS is never going away, some packages will never migrate to ESM and that's not a fundamental issue (yes, harder for compilers to optimise, but a well-crafted commonJS package will still be better than a poorly assembled ESM one), so I think a bit of overreach on the angular warnings that can be ignored (given the common actions are to either ignore or add to the list of warnings to suppress).

[chrismclarke]

@jfmcquade
Judging by https://github.com/angular/angular-cli/pull/26047 it might now just be possible to set '*' in the list of allowedCommonJsDependencies to surpress all warnings.

Should have gone live in @angular-devkit/build-angular 17.1.0, which I think we have upgraded past as part of this PR

[jfmcquade]

Thanks @chrismclarke. The new wildcard option does seem to work for suppressing the CommonJS warning messages.

@esmeetewinkel I think this should be ready to merge once you're satisfied I've addressed the points in your last comment

[esmeetewinkel]

Functional test passed