Upgrade to Angular 14 #738

jamesrwelch · 2023-01-25T09:24:23Z

This is the final PR in the series - completing the upgrade to Angular 14. As part of this PR we also upgrade Chart JS for the summary metadata charts (I couldn't resist a minor style tweak at the same time), and upgrade a number of other packages for consistency.

The PR for upgrading Jodit should ideally be accepted before this one, so leaving it in draft mode for now.

Fixes #608
Fixes #553
Fixes #554

pjmonks · 2023-01-25T17:24:24Z

Finding a significant issue with running the tests, almost half of them fail now because of importing ngx-jodit:

Cannot find module 'ngx-jodit' from 'src/app/shared/shared.module.ts'

    Require stack:
      src/app/shared/shared.module.ts
      src/app/testing/testing.module.ts
      src/app/testing/testing.helpers.ts
      src/app/bulk-edit/bulk-edit-profile.service.spec.ts

      63 | import { MauroItemTreeComponent } from './mauro-item-tree/mauro-item-tree.component';
      64 | import { ElementLabelComponent } from './element-label/element-label.component';
    > 65 | import { NgxJoditModule } from 'ngx-jodit';
         | ^
      66 |
      67 | @NgModule({
      68 |   declarations: [

      at Resolver._throwModNotFoundError (node_modules/jest-resolve/build/resolver.js:491:11)
      at Object.<anonymous> (src/app/shared/shared.module.ts:65:1)

The ngx-jodit module is correctly imported into the SharedModule and can be found by Angular at runtime, but Jest cannot find it. I've tried a number of things to see if I can resolve it, the closest I thought this was was related to this issue:

JsDaddy/ngx-mask#962

ngx-jodit does not have a main field in its package.json file, so I've tried manually configuring Jest to map directly to those files, but without success. I'm at a bit of a loss on what to try next.

pjmonks · 2023-01-25T17:25:48Z

Issues with running the tests don't occur in the develop branch targeting Angular 12, so this test issue has somehow been introduced in the upgrade to Angular 14.

jamesrwelch · 2023-01-25T18:30:10Z

I've been battling this all afternoon... I was hoping you might know the answer!
I have a few more ideas to try... I'm sure I had it working some point in the past

This reverts commit 626aa2f.

jamesrwelch · 2023-01-26T12:26:19Z

Reverted too much... not quite there...

… with a vulnerability

jamesrwelch · 2023-01-26T13:18:46Z

Fixes #608
Fixes #553
Fixes #554

jamesrwelch · 2023-01-26T13:19:23Z

@pjmonks I think this is now ready for review.

pjmonks · 2023-01-26T16:52:30Z

Found an issue with the Bulk Editor which seems to be new as part of this upgrade, but can be fixed separately. See issue #739

pjmonks

The branch now builds successfully. I've had a quick test clicking around the UI, only found one regression bug which I've created as a separate issue, but other than that cannot find any other issues.

I've requested one change to the config files to not break developer workflow, but once that's done I think I can approve it.

pjmonks · 2023-01-26T16:59:24Z

package.json

@@ -9,7 +9,7 @@
    "dist-archive": "tar zcvf dist/mdm-ui-$npm_package_version$([ -z \"$MDM_UI_THEME_NAME\" ] && echo \"\" || echo \".$MDM_UI_THEME_NAME\").tgz -C dist mdm-ui-$npm_package_version$([ -z \"$MDM_UI_THEME_NAME\" ] && echo \"\" || echo \"-$MDM_UI_THEME_NAME\")",
    "test": "ng test",
    "test:watch": "ng test --watch",
-    "test-clearCache": "ng test --clearCache",
+    "test-clearCache": "ng test --clear-cache",


There is a small problem when running npm run license-check command locally. Now that Angular 14 compiles intermediate files to a .angular cache folder, the license-check library will check in this folder too for missing license headers. This wasn't noticed on the Jenkins build I think because of the license check happening before a compile/test.

Please update the license-check-and-add-config.json file like below:

{ "ignore": [ ".angular" // ... ] }

Fantastic catch! I've pushed this change.

pjmonks · 2023-01-26T17:01:40Z

src/app/catalogue-search/catalogue-search-form/catalogue-search-form.component.ts

@@ -34,7 +34,7 @@ import { MatFormFieldAppearance } from '@angular/material/form-field';
 export class CatalogueSearchFormComponent implements OnInit {
  @Input() appearance: MatFormFieldAppearance = 'outline';
  @Input() routeSearchTerm?: string = '';
-  formGroup: FormGroup = new FormGroup({});
+  formGroup: UntypedFormGroup = new UntypedFormGroup({});


I've heard about these new typed Angular Forms, would be interesting to refactor some of these at a later date.

Yes - the automatic migration didn't work for me so I had to figure this out myself, and decided Untyped versions would be best for now. But I've added a ticket #742 for sorting it out later

jamesrwelch · 2023-01-27T06:43:41Z

Thanks again for your really thorough reviewing on this, @pjmonks !

pjmonks

I think this is in a great state to accept now, nice one! 🎉 I'll approve the PR but will give you the honour of merging 🏆

jamesrwelch · 2023-01-27T10:02:10Z

@pjmonks Oh you're too kind! Thanks!

julianpoemp · 2024-10-26T11:53:10Z

Hi,
I'm the developer of ngx-jodit and found out, that you were using ngx-jodit, but reverted back to jodit-angular. I just want to let you know that you can use Jodit v4 with ESM now and it supports template driven or reactive forms now (see demo) 🚀 . Feel free to test it :) . If there are any issues please create on on the issues page. 😄 .

jamesrwelch requested a review from pjmonks January 25, 2023 09:24

jamesrwelch marked this pull request as draft January 25, 2023 09:25

pjmonks added this to the 7.3.0 milestone Jan 25, 2023

pjmonks self-assigned this Jan 25, 2023

jamesrwelch added 4 commits January 25, 2023 12:04

Upgrade to angular 14; upgrade other packages including angular material

39e27ea

Fix remaining build issues

76043e6

Remove chart data labels for now

353c1f4

Pin dependencies

0a72446

jamesrwelch force-pushed the feature/upgrade-angular-14 branch from 76a7c63 to 0a72446 Compare January 25, 2023 12:07

Fix package lock

195b1e4

jamesrwelch added 2 commits January 26, 2023 12:06

Revert "Change dependency: ngx-jodit instead of jodit-angular"

bdc7d80

This reverts commit 626aa2f.

Fix package lock

6414315

jamesrwelch marked this pull request as ready for review January 26, 2023 12:21

jamesrwelch added 3 commits January 26, 2023 12:30

Bring back icon for jodit button

7ffd0ea

Update versions for a couple of dependencies and remove an unused one…

de0702a

… with a vulnerability

And fix package lock again

89f5fce

pjmonks mentioned this pull request Jan 26, 2023

[Post Angular 14 upgrade] Cannot cancel and go back in Bulk Editor #739

Closed

pjmonks requested changes Jan 26, 2023

View reviewed changes

Ignore .angular folder when checking license

8cddca7

pjmonks self-requested a review January 27, 2023 09:54

pjmonks approved these changes Jan 27, 2023

View reviewed changes

jamesrwelch merged commit f315cfb into develop Jan 27, 2023

jamesrwelch deleted the feature/upgrade-angular-14 branch January 27, 2023 10:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade to Angular 14 #738

Upgrade to Angular 14 #738

jamesrwelch commented Jan 25, 2023 •

edited by pjmonks

Loading

pjmonks commented Jan 25, 2023

pjmonks commented Jan 25, 2023

jamesrwelch commented Jan 25, 2023

jamesrwelch commented Jan 26, 2023

jamesrwelch commented Jan 26, 2023

jamesrwelch commented Jan 26, 2023

pjmonks commented Jan 26, 2023

pjmonks left a comment

pjmonks Jan 26, 2023

jamesrwelch Jan 27, 2023

pjmonks Jan 26, 2023

jamesrwelch Jan 27, 2023

jamesrwelch commented Jan 27, 2023

pjmonks left a comment

jamesrwelch commented Jan 27, 2023

julianpoemp commented Oct 26, 2024

Upgrade to Angular 14 #738

Upgrade to Angular 14 #738

Conversation

jamesrwelch commented Jan 25, 2023 • edited by pjmonks Loading

pjmonks commented Jan 25, 2023

pjmonks commented Jan 25, 2023

jamesrwelch commented Jan 25, 2023

jamesrwelch commented Jan 26, 2023

jamesrwelch commented Jan 26, 2023

jamesrwelch commented Jan 26, 2023

pjmonks commented Jan 26, 2023

pjmonks left a comment

Choose a reason for hiding this comment

pjmonks Jan 26, 2023

Choose a reason for hiding this comment

jamesrwelch Jan 27, 2023

Choose a reason for hiding this comment

pjmonks Jan 26, 2023

Choose a reason for hiding this comment

jamesrwelch Jan 27, 2023

Choose a reason for hiding this comment

jamesrwelch commented Jan 27, 2023

pjmonks left a comment

Choose a reason for hiding this comment

jamesrwelch commented Jan 27, 2023

julianpoemp commented Oct 26, 2024

jamesrwelch commented Jan 25, 2023 •

edited by pjmonks

Loading