[ZEPPELIN-6349] Bump Angular from 9 to 13 #5109

tbonelee · 2025-10-22T17:20:56Z

What is this PR for?

This PR bumps Angular from 9 to 13 and updates related dependencies in zeppelin-web-angular.

It addresses:

https://issues.apache.org/jira/browse/ZEPPELIN-6349
https://issues.apache.org/jira/browse/ZEPPELIN-6227 (except the custom TSLint rules)

I removed the zeppelin-helium and helium-vis-example projects in this PR. The Angular rewrite of Helium was never completed, it’s currently unused, and it introduced circular-dependency-related stack overflows during the application build. Given that, removing these modules is the safer choice.

Principal version updates

angular: 9 -> 13
ansi_up: 4 -> 6
date-fns: 2 -> 3
tslib: 1 -> 2
lint-staged: 8 -> 15
typescript: 3.8 -> 4.6

What type of PR is it?

Chore

Todos

- Bump Angular version (Used angular cli)
- Migrate TSLint to ESLint (Used @angular-eslint/schematics:convert-tslint-to-eslint)
- Fix deprecated code usages
- Bump other minor dependencies
- Remove zeppelin-helium and helium-vis-example

What is the Jira issue?

ZEPPELIN-6349

How should this be tested?

Run E2E tests
Manual tests across various pages
Verify serve (dev server), build, and lint work as expected

Questions:

Does the license files need to update? No
Is there breaking changes for older versions? No
Does this needs documentation? No

tbonelee · 2025-10-22T17:24:50Z

zeppelin-web-angular/projects/zeppelin-sdk/src/interfaces/message-common.interface.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */


It silences linting errors of using dot characters(.) in object keys.

tbonelee · 2025-10-22T18:13:16Z

zeppelin-web-angular/projects/zeppelin-sdk/src/interfaces/message-data-type-map.interface.ts

 import { OP } from './message-operator.interface';

-export type MixMessageDataTypeMap = MessageSendDataTypeMap & MessageReceiveDataTypeMap;
+export type MessageDataTypeMap = MessageSendDataTypeMap | MessageReceiveDataTypeMap;


After upgrading to TS4, using an intersection of send/receive maps caused overlapping OP keys (e.g. LIST_NOTE_JOBS) to intersect their payload types (e.g. undefined & ListNoteJobs), producing never.

This broke WebSocketMessage<keyof MessageSendDataTypeMap> because MixMessageTypeMap[K] evaluated to never for some K, leading to generic constraint errors (TS2344) and lost inference.

Switching MixMessageTypeMap to a union (Send | Receive) restores correct indexed access (Send[K] | Receive[K]) and fixes the errors.

Also updated WebSocketMessage to a discriminated-union friendly form for stable inference. (Type-only change; no runtime impact.)

Note

To learn how applying keyof operator to union type or intersection type works, see https://effectivetypescript.com/2024/08/30/keyof-puzzle/

TL;DR

keyof (A & B) = (keyof A) | (keyof B)

keyof (A | B) = (keyof A) & (keyof B)

tbonelee · 2025-10-22T18:23:29Z

zeppelin-web-angular/src/app/pages/workspace/job-manager/job-manager.component.html

+        (startJob)="onStartJob($event)"
+        (stopJob)="onStopJob($event)"


Fixed name conflicts with native events(start, stop)

tbonelee · 2025-10-22T20:38:24Z

zeppelin-web-angular/package.json

+    "build-project:sdk": "ng build --project zeppelin-sdk",
+    "build-project:vis": "ng build --project zeppelin-visualization",
+    "lint": "cross-env NODE_OPTIONS='--max-old-space-size=8192' ng lint && tslint -p tslint-rules/tsconfig.json && prettier --check \"**/*.{ts,js,json,css,html}\"",
+    "lint:fix": "cross-env NODE_OPTIONS='--max-old-space-size=8192' ng lint --fix && tslint --fix -p tslint-rules/tsconfig.json && prettier --write \"**/*.{ts,js,json,css,html}\"",


Added --max-old-space-size=9128 options to fix heap out of memory error.

dididy

My environment shows the above warning when running locally. Could you take a look?

Thank you very much for handling this challenging task. I’ve done a brief review, but I’ll keep an eye on it just in case. I’ll also try cherry-picking the unmerged e2e PR to see if it passes tests. I appreciate your effort.

zeppelin-web-angular/projects/zeppelin-visualization/.eslintrc.json

dididy · 2025-10-23T10:26:36Z

zeppelin-web-angular/projects/zeppelin-sdk/.eslintrc.json

+    {
+      "files": ["*.ts"],
+      "parserOptions": {
+        "project": ["projects/zeppelin-sdk/tsconfig.lib.json", "projects/zeppelin-sdk/tsconfig.spec.json"],


Suggested change

"project": ["projects/zeppelin-sdk/tsconfig.lib.json", "projects/zeppelin-sdk/tsconfig.spec.json"],

"project": ["zeppelin-web-angular/projects/zeppelin-sdk/tsconfig.lib.json", "zeppelin-web-angular/projects/zeppelin-sdk/tsconfig.spec.json"],

I set parserOptions.project to true and unified the per-project config filenames from tsconfig.*.json to tsconfig.json. With this, @typescript-eslint/parser automatically picks the nearest tsconfig.json for each file instead of relying on hard-coded project paths, which avoids the path-resolution error we saw.

If/when we upgrade Angular further and adopt ESLint's flat config, we can switch to a javascript flat config and keep paths relative to the config file location using __dirname, which should remove this class of issues.

https://github.com/apache/zeppelin/actions/runs/18752067872/job/53494105014?pr=5109

It seems like a good direction, but this might be the reason why the e2e tests are failing.

I added path mapping in e2e/tsconfig.json and it seems to work.

dididy · 2025-10-23T10:28:33Z

zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.ts

 } from '@angular/core';
 import { DomSanitizer, SafeHtml, SafeUrl } from '@angular/platform-browser';
-import { default as AnsiUp } from 'ansi_up';
+import { AnsiUp } from 'ansi_up';


It seems like type definitions and related setup for ansi_up are required.

I can’t reproduce this locally. [email protected] ships its own type definitions. Could you try again on your end? If it still fails, a clean install (remove node_modules and the lockfile, then reinstall) or sharing your TS version and the exact error would help.

dididy · 2025-10-23T10:40:20Z

zeppelin-web-angular/.browserslistrc

It seems that .browserslistrc exists in both zeppelin-web-angular/ and zeppelin-web-angular/src/. Aside from comments, there doesn’t appear to be any difference between them. So I think it should be fine to keep just one of them.

I removed src/.browserslistrc.

dididy · 2025-10-23T10:44:12Z

zeppelin-web-angular/package.json

    "ts-node": "~7.0.0",
-    "tsickle": "0.38.1",
-    "tslint": "~5.15.0",
    "tslint-no-circular-imports": "^0.7.0",


If you're removing TSLint, I think you can also remove nz-tslint-rules and tslint-no-circular-imports.
For any custom rules, you can either add them as ESLint rules if possible, or create an issue for them if not.

After that, you can remove the tslint-rule folder and the postinstall build step (npm run build:tslint-rules), and update the lint and lint:fix scripts to use ESLint instead.

It seems that src/tslint.json should be removed as well.

I’ve removed all TSLint-related code for now. If we need any custom lint rules, we can re-implement them later.

https://issues.apache.org/jira/browse/ZEPPELIN-6372
I’ve opened an issue for this, and I’ll add it later.

tbonelee · 2025-10-23T14:53:15Z

I've fixed failed .less file path resolution with this commit (f68719f)

dididy · 2025-10-23T15:32:23Z

zeppelin-web-angular/src/app/app-runtime-compiler.providers.ts

How about replacing the JIT-based RUNTIME_COMPILER_PROVIDERS with an Ivy-compatible approach?

I think replacing this with reliable, public APIs won't be straightforward. The Angular team has opposed exposing a runtime API that compiles string templates for security and performance reasons.
(angular/angular-cli#9306 (comment))

We've also had to implement workarounds for related runtime-compiler/AOT issue. (#4809)

Given that, we may consider alternative approaches to rendering dynamic templates with data binding.

, or else we could deprecate %angular interpreter.

Thank you for checking instead. As you mentioned, since replacing it isn’t straightforward, I think it’s fine to leave it as is if there are no issues with its functionality. Deprecating the Angular interpreter for this would mean we won’t be able to upgrade it in the future, so that doesn’t seem like a good approach.

I’ve confirmed that all the reviews I left earlier are functioning correctly. Thank you for the great work, and I’ll take a closer look before approving. Thanks again.

dididy · 2025-10-23T15:33:44Z

zeppelin-web-angular/src/assets/classic-visualization-templates/columnselector_settings.html

  >
-    <span style="vertical-align: middle; display: inline-block; margin-top: 3px; color: #333;">Available Fields</span>
-    <div style="clear: both;"></div>
+    <span style="vertical-align: middle; display: inline-block; margin-top: 3px; color: #333">Available Fields</span>


It would be nice to have a consistent rule for this as well, since in some cases the styles are aligned with line breaks and in others they are not.

I think maybe printWidth option do that work. Also, as we use (almost) the latest prettier now, we won't face major reformatting for a while.

Then I think we can consider this part later. Thanks!

dididy

https://github.com/dididy/zeppelin/actions/runs/18786968912

https://github.com/dididy/zeppelin/commits/pr/5109-e2e-2/

I created a new branch(e2e test purpose) based on current PR, merged #5101, #5102, and #5105 into it, and ran the tests — all of them passed. Since the core notebook-related features in Zeppelin are functioning properly, it seems there are no major issues.

ParkGyeongTae

LGTM 👍

🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>

…gRootDir" This reverts commit da1b3e3.

This reverts commit 5ca3379.

🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>

Use relative paths for ng-zorro-antd imports to resolve webpack warnings. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>

### What is this PR for? This PR bumps Angular from 9 to 13 and updates related dependencies in zeppelin-web-angular. It addresses: - https://issues.apache.org/jira/browse/ZEPPELIN-6349 - https://issues.apache.org/jira/browse/ZEPPELIN-6227 (except the custom TSLint rules) I removed the zeppelin-helium and helium-vis-example projects in this PR. The Angular rewrite of Helium was never completed, it’s currently unused, and it introduced circular-dependency-related stack overflows during the application build. Given that, removing these modules is the safer choice. #### Principal version updates - angular: 9 -> 13 - ansi_up: 4 -> 6 - date-fns: 2 -> 3 - tslib: 1 -> 2 - lint-staged: 8 -> 15 - typescript: 3.8 -> 4.6 ### What type of PR is it? Chore ### Todos * [x] - Bump Angular version (Used angular cli) * [x] - Migrate TSLint to ESLint (Used `<at>angular-eslint/schematics:convert-tslint-to-eslint`) * [x] - Fix deprecated code usages * [x] - Bump other minor dependencies * [x] - Remove `zeppelin-helium` and `helium-vis-example` ### What is the Jira issue? [ZEPPELIN-6349](https://issues.apache.org/jira/browse/ZEPPELIN-6349) ### How should this be tested? - Run E2E tests - Manual tests across various pages - Verify `serve` (dev server), `build`, and `lint` work as expected ### Questions: * Does the license files need to update? No * Is there breaking changes for older versions? No * Does this needs documentation? No Closes #5109 from tbonelee/upgrade-web-angular. Signed-off-by: ChanHo Lee <[email protected]> (cherry picked from commit 358f9e5) Signed-off-by: ChanHo Lee <[email protected]>

tbonelee · 2025-10-26T08:09:04Z

Thanks, merged into master and branch-0.12

tbonelee commented Oct 22, 2025

View reviewed changes

dididy reviewed Oct 23, 2025

View reviewed changes

dididy approved these changes Oct 25, 2025

View reviewed changes

dididy mentioned this pull request Oct 25, 2025

[ZEPPELIN-6371] Convert published paragraph rendering to Micro Frontend(Angular to React) in New UI #5111

Open

tbonelee added 5 commits October 26, 2025 15:13

Upgrade Angular to v10 and remove uncompleted Helium v2

659bc02

Remove unnecessary protracter

47c4b73

Remove helium-vis-example code

20594ba

Upgrade Angular (v10 -> v11)

749446f

Upgrade Angular (v11 -> v12)

f5ecc6b

ParkGyeongTae previously approved these changes Oct 26, 2025

View reviewed changes

tbonelee added 15 commits October 26, 2025 15:56

Upgrade Angular (v12 -> v13)

24038b5

Fix styles

2bfe1df

Add development configurations

f71f9ac

Rollback monaco editor

55d9cab

Rename MessageDataTypeMap

6152475

Rename unnecessary NODE_OPTION

1adc2fa

Bump ansi_up from 4.0.4 to 6.0.6

d0d9e69

Bump date-fns from 2.30.0 to 3.6.0

7025272

Bump dotenv from 8.6.0 to 17.2.3

b8f15cd

Bump lint-staged from 8.1.6 to 15.5.2

d8b385b

Migrate tslint to eslint

26c9415

Update exclusion rule in pom.xml to use .browserslistrc

49d63fa

Clarify type assertion in bindParagraph method

7563ce7

Fix formatting error

5c2c624

Fix missing EOF newline in .prettierignore

452e908

tbonelee and others added 12 commits October 26, 2025 15:57

Disable stylistic lint rules (Fix heap out of memory)

f57c34a

Add import/no-cycle rule

6086e50

Migrate eslint config to flat config

25e8edf

Fix ESLint parserOptions.project path resolution with tsconfigRootDir

dffa51f

🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>

Revert "Fix ESLint parserOptions.project path resolution with tsconfi…

aa0777d

…gRootDir" This reverts commit da1b3e3.

Revert "Migrate eslint config to flat config"

dd27805

This reverts commit 5ca3379.

Reorganize TypeScript config files and use ESLint project: true

ab553fa

🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>

Remove src/.browserslistrc file\

e57e790

Fix tsConfig path in angular.json

b4da5d3

Remove custom tslint related files

bdfd8a5

Fix webpack LESS loader invalid dependency paths

7b77cb7

Use relative paths for ng-zorro-antd imports to resolve webpack warnings. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>

Add path mapping for e2e/* in tsconfig.json

0c8e7c2

tbonelee dismissed ParkGyeongTae’s stale review via 0c8e7c2 October 26, 2025 07:13

tbonelee force-pushed the upgrade-web-angular branch from ca994f3 to 0c8e7c2 Compare October 26, 2025 07:13

Remove unused eslint plugins

e16bc7a

dididy approved these changes Oct 26, 2025

View reviewed changes

ParkGyeongTae approved these changes Oct 26, 2025

View reviewed changes

tbonelee merged commit 358f9e5 into apache:master Oct 26, 2025
21 of 23 checks passed

		@@ -1,3 +1,4 @@
		/* eslint-disable @typescript-eslint/naming-convention */

		(startJob)="onStartJob($event)"
		(stopJob)="onStopJob($event)"

	"project": ["projects/zeppelin-sdk/tsconfig.lib.json", "projects/zeppelin-sdk/tsconfig.spec.json"],
	"project": ["zeppelin-web-angular/projects/zeppelin-sdk/tsconfig.lib.json", "zeppelin-web-angular/projects/zeppelin-sdk/tsconfig.spec.json"],

[ZEPPELIN-6349] Bump Angular from 9 to 13 #5109

[ZEPPELIN-6349] Bump Angular from 9 to 13 #5109

Uh oh!

Conversation

tbonelee commented Oct 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is this PR for?

Principal version updates

What type of PR is it?

Todos

What is the Jira issue?

How should this be tested?

Questions:

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tbonelee Oct 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Note

TL;DR

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dididy left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dididy Oct 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tbonelee commented Oct 23, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dididy left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ParkGyeongTae left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

tbonelee commented Oct 26, 2025

tbonelee commented Oct 22, 2025 •

edited

Loading

tbonelee Oct 22, 2025 •

edited

Loading

dididy left a comment •

edited

Loading

dididy Oct 23, 2025 •

edited

Loading

dididy left a comment •

edited

Loading