Update the Angular wrapper to work with Angular@16. #10396

jansiegel · 2023-06-05T13:25:43Z

Context

The main changes made in this PR:

Since the release of angular@16 the @handsontable/angular package was no longer compatible with the latest Angular release. This PR aims to change that.
I moved the current wrapper logic to a new library template based on @angular/cli@12. The new wrapper build uses the Ivy compiler, and being built with angular@12 makes it compatible with Angular versions 12 up to 16 (currently the latest release).

Unfortunately, it breaks the compatibility with Angular versions 11 and earlier.
It's worth noting, that Angular currently provides active support only for versions 14+.
Currently, the examples workflow does not test the angular-based examples properly.
When building the /next/ section of the examples only handsontable is being symlinked in the examples' node_modules. What's even worse, the wrapper version being used in the build and testing process is not latest, but 12.0.1.

After the changes made in this PR, both handsontable and @handsontable/angular should be linked properly in the examples build/test workflow.
I removed the Angular 9-11 examples, as these versions are no longer compatible with the wrapper.
I added Angular 14-16 examples + created an angular-next section which builds and tests the wrapper against the version of Angular tagged as next.
While rewriting the wrapper to later versions of Angular (mostly 16 and 12), I had to make some corrections regarding the typescript typing. There are places in the wrapper logic that would benefit from a bigger refactor, but I did not make any major changes as it was not in the scope of this task.
For the same reason as above, I had to make some changes to Handsontable, namely, adding some missing type definitions that were not tested with the wrapper based on Angular@9.
I reverted the temporary changes done in the release process of 12.4.0, which purpose was to prevent the workflows from using the latest angular version.
I modified the code-examples workflow to utilize the actions/setup-node's caching mechanism instead of actions/cache. The latter would break the new angular wrapper build + it makes sense to use the pre-built caching that is already being used in our other workflows.
I had to make some modifications to other workflows, as the new set of dependencies being introduced with @angular/cli@12 broke some things, like the documentation linter. This is a bigger issue regarding dependency management in the monorepo, which will have to be tackled at some point in the future.
For the same shared-dependency-based reasons, I had to modify the vue3 wrapper tests, as some of them no longer passed. (The changes make sense, as the types were mismatched in one of the tests, but it was not being analyzed before)

How has this been tested?

Tested the new wrapper manually with Angular versions 12 through 16 + next.
The code-examples workflow built the examples for the same versions on the CI.

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature or improvement (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Additional language file or change to the existing one (translations)

Related issue(s):

handsontable/dev-handsontable#1292
Angular v16 (Ivy support) #10349

Affected project(s):

Checklist:

I have reviewed the guidelines about Contributing to Handsontable and I confirm that my code follows the code style of this project.
I have signed the Contributor License Agreement
My change requires a change to the documentation.

- Remove examples for angular@<12 - Add examples for angular@14-16 - Add examples for angular@next - Add missing types to Handsontable - Modify the helper scripts and GHA workflows - Regenerate package-lock

…1292

- Update package-lock

…e-lock.

…rkflow." This reverts commit fb0edd2.

…file.

…dd changelog, correct a problem found by the code quality workflow.

…vents in the code examples workflow.

…ions/setup-node in the code examples workflow.

examples/next/docs/angular-14/basic-example/src/app/app.component.html

examples/next/docs/angular-15/basic-example/spec/Smoke.spec.js

examples/next/docs/angular-15/basic-example/src/app/app.component.html

examples/next/docs/angular-15/demo/spec/Smoke.spec.js

examples/next/docs/angular-16/basic-example/package.json

examples/next/docs/angular-next/basic-example/spec/support/jasmine.config.js

examples/next/docs/angular-next/basic-example/src/app/app.component.html

examples/next/docs/angular/basic-example/package.json

examples/next/docs/angular/basic-example/src/app/app.component.html

Co-authored-by: Krzysztof Budnik <571316+budnix@users.noreply.github.com>

…sontable into feature/dev-issue-1292

…t's using the correct version.

budnix

Looks good 👌 I tested the bundle 0.0.0-next-44d778b-20230607 with simple apps that use Angular 12 and Angular 16, and I didn't find any issues.

…taging workflow.

…sontable into feature/dev-issue-1292

This reverts commit 18fb9cc.

github-actions · 2023-06-12T08:44:51Z

Launch the local version of documentation by running:

npm run docs:review 80e131154ff3019cb77253b21135f08eb1a08317

budnix · 2023-06-12T08:59:04Z

examples/next/docs/angular/basic-example/package.json

+    "@angular/animations": "^16.0.0",
+    "@angular/common": "^16.0.0",
+    "@angular/compiler": "^16.0.0",
+    "@angular/core": "^16.0.0",
+    "@angular/forms": "^16.0.0",
+    "@angular/platform-browser": "^16.0.0",
+    "@angular/platform-browser-dynamic": "^16.0.0",
+    "@angular/router": "^16.0.0",


For /next/ examples, shouldn't the "latest" tag be used here?

Yup 9cab13b

budnix · 2023-06-12T09:01:35Z

docs/.vuepress/handsontable-manager/dependencies.js

@@ -92,12 +92,13 @@ const buildDependencyGetter = (version) => {
      rxjs: ['https://cdn.jsdelivr.net/npm/rxjs@6/bundles/rxjs.umd.js', [/* todo */]],
      'core-js': ['https://cdn.jsdelivr.net/npm/core-js@2/client/core.min.js', [/* todo */]],
      zone: ['https://cdn.jsdelivr.net/npm/zone.js@0.9/dist/zone.min.js', [/* todo */]],


WDYT to bump the zonejs deps? I am thinking of bumping to the same version as in the wrapper deps ~0.11.4.

Seems like a good idea 👍 80e1311

budnix

Looks good. Also, I've checked the Docs by deploying the latest changes to the staging, and it also looks good.

aninde

I have verified that the build process using npm run all build successfully builds the correct version and examples, including Angular 16.0.3 (angular-16 and currently angular-next).

The Handsontable-Angular integration is functional in environments built with Angular versions 12, 13, 14, 15 and 16. Tested with 0.0.0-next-44d778b-20230607.

jansiegel added 3 commits May 17, 2023 10:04

Correct the package-linking script

57517bd

- Rewrite the Angular wrapper to be based on Angular@12

bb7020a

- Remove examples for angular@<12 - Add examples for angular@14-16 - Add examples for angular@next - Add missing types to Handsontable - Modify the helper scripts and GHA workflows - Regenerate package-lock

Merge remote-tracking branch 'origin/develop' into feature/dev-issue-…

60b0bf0

…1292

krzysztofspilka linked an issue Jun 5, 2023 that may be closed by this pull request

Angular v16 (Ivy support) #10349

Closed

krzysztofspilka added Breaking change Angular Issues regarding the @handsontable/angular wrapper. labels Jun 5, 2023

jansiegel and others added 21 commits June 6, 2023 08:23

Update the vue3 wrapper dependencies.

211beb4

- Remove the previously-added dev dependency from the vue3 wrapper

696ccab

- Update package-lock

Update 'setup-node' in the GHA workflows + define the paths to packag…

d876e94

…e-lock.

Remove root dependencies installation from the docs linter workflow.

fb0edd2

Revert "Remove root dependencies installation from the docs linter wo…

c4da5ce

…rkflow." This reverts commit fb0edd2.

Declare the lock file for the docs linter workflow as the docs' lock …

8eca4e8

…file.

Rearrange the docs lint workflow.

887fa56

Modify vue3 test case to match the hook type declarations.

144afb1

Correct the wrong matcher function.

bb5142a

Revert the test changes made to the GHA workflows.

7f77758

Modify the angular wrapper dependencies to match the old structure, a…

fc84d84

…dd changelog, correct a problem found by the code quality workflow.

Mark the change as a breaking change.

0f5598e

Revert changes to examples' package-locks from 12.4.0

f1f0fc2

Revert unneeded changes to package-locks across examples.

4b5b4bd

Temporarily replace cache usage with npm ci + modify the triggering e…

ee04261

…vents in the code examples workflow.

Replace the cache logic from actions/cache to the one provided by act…

8723679

…ions/setup-node in the code examples workflow.

Correct the examples symlinking script.

c81767e

Correct the examples symlinking script.

74e21b1

Correct the examples' package.json workspaces regexp.

8b30cc3

Revert the temporary trigger change in the examples workflow.

1148aa1

Merge branch 'develop' into feature/dev-issue-1292

a83d3f8

jansiegel marked this pull request as ready for review June 7, 2023 08:29

jansiegel requested a review from budnix June 7, 2023 08:30

budnix requested changes Jun 7, 2023

View reviewed changes

jansiegel and others added 5 commits June 7, 2023 11:07

Update helper script.

715ef1f

Apply suggestions from code review

0ecaf9a

Co-authored-by: Krzysztof Budnik <571316+budnix@users.noreply.github.com>

Remove testing leftovers.

075c53e

Merge branch 'feature/dev-issue-1292' of github.com:handsontable/hand…

ee0bc24

…sontable into feature/dev-issue-1292

Copy the angular peer dependencies to dev dependencies to make sure i…

44d778b

…t's using the correct version.

budnix self-requested a review June 7, 2023 11:51

budnix previously approved these changes Jun 7, 2023

View reviewed changes

budnix assigned jansiegel Jun 7, 2023

jansiegel and others added 3 commits June 12, 2023 08:53

Merge branch 'develop' into feature/dev-issue-1292

7a81497

Rearrange the order of the dependencies being installed in the docs s…

8758a80

…taging workflow.

Merge branch 'feature/dev-issue-1292' of github.com:handsontable/hand…

35fbace

…sontable into feature/dev-issue-1292

jansiegel dismissed budnix’s stale review via 35fbace June 12, 2023 07:11

jansiegel added 3 commits June 12, 2023 09:15

Trigger docs staging run.

18fb9cc

Revert "Trigger docs staging run."

1e8cbf9

This reverts commit 18fb9cc.

Bump the angular version in the documentation to 12.

dbccf31

jansiegel requested a review from budnix June 12, 2023 08:50

budnix reviewed Jun 12, 2023

View reviewed changes

Update angular@16 demo's dependencies.

4041bf0

budnix reviewed Jun 12, 2023

View reviewed changes

jansiegel added 2 commits June 12, 2023 11:01

Update angular@latest basic example's dependencies.

9cab13b

Update zone.js version for the docs.

80e1311

budnix approved these changes Jun 12, 2023

View reviewed changes

jansiegel merged commit a81dd9e into develop Jun 12, 2023
24 checks passed

jansiegel deleted the feature/dev-issue-1292 branch June 12, 2023 09:26

aninde reviewed Jun 12, 2023

View reviewed changes

aninde added the Verified by QA label Jun 15, 2023

kirszenbaum mentioned this pull request Jun 22, 2023

Docs: Edit 13.0.0 docs #10418

Merged

AMBudnik added the Status: Released label Jun 22, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update the Angular wrapper to work with Angular@16. #10396

Update the Angular wrapper to work with Angular@16. #10396

jansiegel commented Jun 5, 2023 •

edited

Loading

budnix left a comment

github-actions bot commented Jun 12, 2023 •

edited

Loading

budnix Jun 12, 2023

jansiegel Jun 12, 2023

budnix Jun 12, 2023

jansiegel Jun 12, 2023

budnix left a comment •

edited

Loading

aninde left a comment •

edited

Loading

Update the Angular wrapper to work with Angular@16. #10396

Update the Angular wrapper to work with Angular@16. #10396

Conversation

jansiegel commented Jun 5, 2023 • edited Loading

Context

How has this been tested?

Types of changes

Related issue(s):

Affected project(s):

Checklist:

budnix left a comment

Choose a reason for hiding this comment

github-actions bot commented Jun 12, 2023 • edited Loading

budnix Jun 12, 2023

Choose a reason for hiding this comment

jansiegel Jun 12, 2023

Choose a reason for hiding this comment

budnix Jun 12, 2023

Choose a reason for hiding this comment

jansiegel Jun 12, 2023

Choose a reason for hiding this comment

budnix left a comment • edited Loading

Choose a reason for hiding this comment

aninde left a comment • edited Loading

Choose a reason for hiding this comment

jansiegel commented Jun 5, 2023 •

edited

Loading

github-actions bot commented Jun 12, 2023 •

edited

Loading

budnix left a comment •

edited

Loading

aninde left a comment •

edited

Loading