Skip to content

[FLINK-40028][runtime-web] Update Angular to v21 and ng-zorro-antd to v21 - #28593

Merged
MartijnVisser merged 3 commits into
apache:masterfrom
MartijnVisser:flink-web-angular21
Jul 1, 2026
Merged

[FLINK-40028][runtime-web] Update Angular to v21 and ng-zorro-antd to v21#28593
MartijnVisser merged 3 commits into
apache:masterfrom
MartijnVisser:flink-web-angular21

Conversation

@MartijnVisser

@MartijnVisser MartijnVisser commented Jun 30, 2026

Copy link
Copy Markdown
Contributor

What is the purpose of the change

Upgrade the Flink web dashboard from Angular 20.1.3 / ng-zorro-antd 20.1.0 to the latest LTS
Angular 21.2.17 / ng-zorro-antd 21.3.2 (TypeScript 5.9), refresh the aligned eslint toolchain and
@types/node, and regenerate the lockfile (resolving the outstanding npm security advisories that
Dependabot had been filing against this module) and the stale NOTICE.

Scope: dependency upgrade only. Templates stay on *ngIf/*ngFor; the Angular control-flow
migration (@if/@for), prettier 3, and eslint 9 are a dedicated follow-up (agreed with reviewers,
see discussion below).

Brief change log

  • @angular/* 20.1.3 -> 21.2.17, ng-zorro-antd 20.1.0 -> 21.3.2, TypeScript 5.8 -> 5.9
    (@angular/cdk 21 pulled in transitively); @angular-eslint/* -> 21.4.0, @typescript-eslint/*
    -> 8.62.x (eslint stays 8.57), @types/node -> 22
  • Regenerate package-lock.json against the public registry (absorbs the outstanding security
    advisories) and the previously stale NOTICE (it still listed Angular 18)
  • Adopt the secure dependency floors from [FLINK-39516][runtime-web] Address npm security advisories in flink-runtime-web web-dashboard #28000 / FLINK-39516 (thanks @spuru9)
  • Required Angular 21 code migrations only: provideZoneChangeDetection() in main.ts, the
    tsconfig lib default, and a @HostListener('window:resize') type fix
  • Keep templates on *ngIf/*ngFor by disabling @angular-eslint's prefer-control-flow, and pin
    prettier to master's 2.6.2, so this PR carries no control-flow or license-header formatting churn
  • Build cleanup: remove the obsolete HUSKY_SKIP_INSTALL env var + deprecated npm ci flags (husky
    was removed in FLINK-33939) and the orphaned lint-staged; bump the README Node minimum

This PR supersedes #28000 (FLINK-39516): regenerating the lockfile on Angular 21 ships the same secure
dependency versions, so FLINK-39516 can be closed as superseded once this lands. The prettier
cache-masking that this area is sensitive to is addressed separately in FLINK-39587 / #28440.

Deferred to a dedicated follow-up PR (agreed with @Laffery on this PR): the Angular control-flow
migration (@if/@for) + prettier 3 (+ eslint-plugin-prettier 5) + eslint 9 flat config +
.git-blame-ignore-revs. Node/npm pins and frontend-maven-plugin (1.15.1) already satisfy Angular
21; the webpack :browser builder is kept (esbuild application-builder migration is a follow-up).

Verifying this change

This is a dependency upgrade verified by the build/lint gate plus manual testing:

  • flink-runtime-web builds via Maven, where frontend-maven-plugin runs npm ci and
    npm run ci-check (eslint + stylelint + production build) with the pinned Node 22.16.0 / npm 10.9.0
  • Templates are unchanged from master (*ngIf/*ngFor), so UI behaviour is unchanged; spot-checked
    manually against a local standalone cluster (Overview, Job list/detail, JobManager, TaskManager,
    Submit) with the browser console open and free of errors

Does this pull request potentially affect one of the following parts:

  • Dependencies (does it add or upgrade a dependency): yes (frontend npm dependencies: Angular
    20->21, ng-zorro-antd 20->21, TypeScript 5.8->5.9 and transitive updates; NOTICE regenerated)
  • The public API, i.e., is any changed class annotated with @Public(Evolving): no
  • The serializers: no
  • The runtime per-record code paths (performance sensitive): no
  • Anything that affects deployment or recovery: JobManager, Checkpointing, Kubernetes/Yarn, ZooKeeper: no
  • The S3 file system connector: no

Documentation

  • Does this pull request introduce a new feature? no

Was generative AI tooling used to co-author this PR?
  • Yes (please specify the tool below)

Generated-by: Claude Opus 4.8 (1M context)

@MartijnVisser

Copy link
Copy Markdown
Contributor Author

@Laffery Could you perhaps help out with a review here?

@flinkbot

flinkbot commented Jun 30, 2026

Copy link
Copy Markdown
Collaborator

CI report:

Bot commands The @flinkbot bot supports the following commands:
  • @flinkbot run azure re-run the last Azure build

@MartijnVisser
MartijnVisser force-pushed the flink-web-angular21 branch 2 times, most recently from f7df52a to 87eaf02 Compare June 30, 2026 20:10
@github-actions github-actions Bot added the community-reviewed PR has been reviewed by the community. label Jul 1, 2026
@Laffery

Laffery commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

@MartijnVisser
Thanks for the upgrade work. One thing I think we should clean up before merging: after removing the lint-staged setup, quite a few migrated templates appear to have escaped formatting.

For example, the new Angular control-flow blocks in job-rescales.component.html, job-overview-drawer-subtasks.component.html, and submit.component.html contain unindented bodies, chained } @if (...) { blocks, and split @for expressions that make the templates harder to review and maintain.

Could you please run npm run lint:fix to format the whole project?

@MartijnVisser

Copy link
Copy Markdown
Contributor Author

@Laffery Thanks. You're right the control-flow blocks are poorly formatted, but the cause isn't the lint-staged removal. It's that prettier 2.6.2 (what master resolves) doesn't support Angular @if/@for formatting; that landed in prettier 3. I verified npm run lint:fix on this branch is a no-op (it can't reindent them), whereas prettier 3 does reindent them properly.

The catch: the same prettier 3 also reformats the ASF license-header comments across every template, which is exactly the churn flagged on this PR earlier (#28593 discussion) and is really the FLINK-39587 / #28440 territory. So "format the whole project" is a prettier-3 upgrade + project-wide reformat (with a .git-blame-ignore-revs entry), not a small lint:fix.

Given FLINK-40028 is scoped to the Angular/ng-zorro version bump, I'd propose keeping the templates on ngIf/ngFor here (as master) and doing the control-flow migration + prettier 3 together as a dedicated follow-up, where the reformat can be reviewed on its own. Would that work for you, or do you feel strongly it should all land in this PR?

@Laffery

Laffery commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

Given FLINK-40028 is scoped to the Angular/ng-zorro version bump, I'd propose keeping the templates on ngIf/ngFor here (as master) and doing the control-flow migration + prettier 3 together as a dedicated follow-up, where the reformat can be reviewed on its own. Would that work for you, or do you feel strongly it should all land in this PR?

It works for me!

What's more, I suggest to upgrade eslint to v9 together in the follow-up PR, https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/eslint.config.mjs could be an example

MartijnVisser and others added 3 commits July 1, 2026 17:00
… v21

Upgrade the web dashboard to the latest LTS Angular (21.2.17) and the matching stable ng-zorro-antd (21.3.2), with TypeScript 5.9, the aligned @angular-eslint/@typescript-eslint toolchain, and @types/node 22. Regenerate the lockfile (resolving the outstanding npm security advisories) and the previously stale NOTICE. Pin prettier to master's 2.6.2 to avoid license-header reformatting drift, and keep templates on *ngIf/*ngFor by disabling prefer-control-flow; the control-flow migration, prettier 3 and eslint 9 are a dedicated follow-up.

Generated-by: Claude Opus 4.8 (1M context)
…ode prerequisite

The HUSKY_SKIP_INSTALL env var and the deprecated 'npm ci --cache-max=0 --no-save' flags are obsolete: husky was removed in FLINK-33939 and the flags are no-ops under npm 10. Bump the documented Node minimum to match Angular 21's floor.

Generated-by: Claude Opus 4.8 (1M context)
…#28000

Raise the declared package.json minimums for the non-Angular dependencies to the secure versions identified in FLINK-39516 / apache#28000, so the declared floors match the versions the lockfile already resolves. No change to the shipped artifact (resolved versions are unchanged).

Co-Authored-By: Purushottam Sinha <sinhapurushottam911@gmail.com>
Generated-by: Claude Opus 4.8 (1M context)
@MartijnVisser
MartijnVisser force-pushed the flink-web-angular21 branch from 75d3142 to 8cdbeb3 Compare July 1, 2026 15:05
@MartijnVisser

Copy link
Copy Markdown
Contributor Author

Done, @Laffery. I've rescoped this PR to the dependency upgrade only: templates stay on *ngIf/*ngFor (I disabled prefer-control-flow with a comment pointing to the follow-up), prettier stays at master's 2.6.2, and the diff is now 9 files with zero template / control-flow / license-header churn.

I'll open the dedicated follow-up for the control-flow migration (@if/@for) + prettier 3 + eslint 9 flat config (using the ng-zorro eslint.config.mjs you referenced). Thanks for the steer!

@Laffery Laffery left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@github-actions github-actions Bot added community-reviewed-LGTM Applied if there are 2 non-committer approves on a PR. (The submitter cannot approve their own PR.) and removed community-reviewed PR has been reviewed by the community. community-reviewed-LGTM Applied if there are 2 non-committer approves on a PR. (The submitter cannot approve their own PR.) labels Jul 1, 2026
@MartijnVisser
MartijnVisser merged commit 4da0730 into apache:master Jul 1, 2026
@MartijnVisser
MartijnVisser deleted the flink-web-angular21 branch July 1, 2026 20:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants