Skip to content

TB Angular upgrade to v22 #7160

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cdavalos7 wants to merge 1 commit into
base: master
Choose a base branch
from
+2,331 −2,354
Open

TB Angular upgrade to v22 #7160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 19 additions & 19 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,12 @@
},
"homepage": "https://github.com/tensorflow/tensorboard#readme",
"devDependencies": {
"@angular-devkit/build-angular": "^21.0.0",
"@angular/build": "^21.0.0",
"@angular-devkit/build-angular": "^22.0.0",
"@angular/build": "^22.0.0",
"@angular/build-tooling": "https://github.com/angular/dev-infra-private-build-tooling-builds.git#b87de6c1190eb38a74ce72a530331f2f184fe918",
"@angular/cli": "^21.0.0",
"@angular/compiler": "21.2.18",
"@angular/compiler-cli": "^21.0.0",
"@angular/cli": "^22.0.0",
"@angular/compiler": "22.1.7",
"@angular/compiler-cli": "^22.0.0",
"@babel/core": "^7.16.12",
"@bazel/concatjs": "5.8.1",
"@bazel/esbuild": "5.8.1",
Expand Down Expand Up @@ -62,22 +62,22 @@
"prettier-plugin-organize-imports": "2.3.4",
"requirejs": "^2.3.7",
"tslib": "^2.3.0",
"typescript": "5.9.3",
"typescript": "6.0.3",
"yarn-deduplicate": "^5.0.0"
},
"dependencies": {
"@angular/animations": "^21.0.0",
"@angular/cdk": "^21.0.0",
"@angular/common": "21.2.18",
"@angular/core": "^21.0.0",
"@angular/forms": "^21.0.0",
"@angular/localize": "^21.0.0",
"@angular/material": "^21.0.0",
"@angular/platform-browser": "^21.0.0",
"@angular/platform-browser-dynamic": "^21.0.0",
"@angular/router": "^21.0.0",
"@ngrx/effects": "^21.0.0",
"@ngrx/store": "^21.0.0",
"@angular/animations": "^22.0.0",
"@angular/cdk": "^22.0.0",
"@angular/common": "22.1.7",
"@angular/core": "^22.0.0",
"@angular/forms": "^22.0.0",
"@angular/localize": "^22.0.0",
"@angular/material": "^22.0.0",
"@angular/platform-browser": "^22.0.0",
"@angular/platform-browser-dynamic": "^22.0.0",
"@angular/router": "^22.0.0",
"@ngrx/effects": "^22.0.0",
"@ngrx/store": "^22.0.0",
"@polymer/decorators": "^3.0.0",
"@polymer/iron-behaviors": "^3.0.1",
"@polymer/iron-collapse": "^3.0.1",
Expand Down Expand Up @@ -124,7 +124,7 @@
"marked": "^4.0.10",
"monaco-editor-core": "^0.26.0",
"monaco-languages": "^2.6.0",
"ngx-color-picker": "13.0.0",
"ngx-color-picker": "20.1.1",
"numeric": "^1.2.6",
"plottable": "^3.9.0",
"postinstall-postinstall": "^2.1.0",
Expand Down
24 changes: 7 additions & 17 deletions patches/@bazel+concatjs+5.8.1.patch
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,10 @@ index fed787a..377915a 100755
closure_js = closure_js_files,
devmode_js = devmode_js_files,
diff --git a/node_modules/@bazel/concatjs/internal/common/tsconfig.bzl b/node_modules/@bazel/concatjs/internal/common/tsconfig.bzl
index b01c999..86d61d4 100755
index b01c999..8187cfc 100755
--- a/node_modules/@bazel/concatjs/internal/common/tsconfig.bzl
+++ b/node_modules/@bazel/concatjs/internal/common/tsconfig.bzl
@@ -110,6 +110,48 @@ def create_tsconfig(
@@ -110,6 +110,52 @@ def create_tsconfig(
"*": node_modules_mappings,
ctx.workspace_name + "/*": base_path_mappings,
}
Expand All @@ -50,6 +50,10 @@ index b01c999..86d61d4 100755
+ "@angular/cdk",
+ "@angular/common",
+ "@angular/core",
+ # TypeScript 6.0 added error TS2882 for side-effect imports whose types
+ # do not resolve, and bootstrap.ts imports "@angular/localize/init" for
+ # its side effect only.
+ "@angular/localize",
+ "@angular/material",
+ "@angular/platform-browser",
+ "@angular/platform-browser-dynamic",
Expand Down Expand Up @@ -115,22 +119,8 @@ index e049d15..9ebeec4 100755
if (bazelOpts.angularCompilerOptions && bazelOpts.angularCompilerOptions.assets) {
bazelOpts.angularCompilerOptions.assets = bazelOpts.angularCompilerOptions.assets.map(f => resolveNormalizedPath(options.rootDir, f));
}
diff --git a/node_modules/@bazel/concatjs/package.json b/node_modules/@bazel/concatjs/package.json
index dbc7cee..1129289 100755
--- a/node_modules/@bazel/concatjs/package.json
+++ b/node_modules/@bazel/concatjs/package.json
@@ -24,7 +24,8 @@
"dependencies": {
"protobufjs": "6.8.8",
"source-map-support": "0.5.9",
- "tsutils": "3.21.0"
+ "tsutils": "3.21.0",
+ "typescript": "5.9.3"
},
"peerDependencies": {
"karma": ">=4.0.0",
diff --git a/node_modules/@bazel/concatjs/web_test/karma_web_test.bzl b/node_modules/@bazel/concatjs/web_test/karma_web_test.bzl
index e66b5e8..3301ef7 100755
index 55c7d06..b519104 100755
--- a/node_modules/@bazel/concatjs/web_test/karma_web_test.bzl
+++ b/node_modules/@bazel/concatjs/web_test/karma_web_test.bzl
@@ -237,7 +237,7 @@ def _karma_web_test_impl(ctx):
Expand Down
19 changes: 13 additions & 6 deletions patches/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ hunk disappeared.
**Modified files:**
* `node_modules/@bazel/concatjs/internal/common/compilation.bzl`
* `node_modules/@bazel/concatjs/internal/common/tsconfig.bzl`
* `node_modules/@bazel/concatjs/package.json`
* `node_modules/@bazel/concatjs/web_test/karma_web_test.bzl`

**What it does:**
Three independent changes:
Expand All @@ -41,8 +41,15 @@ Three independent changes:
Angular 21, APF packaging exposes type definitions only through
`package.json` `"exports"`, which the Bazel `node_modules` path mapping
cannot resolve.
3. `package.json` adds `typescript` as a direct dependency because the Bazel
sandbox cannot find it otherwise.
3. `karma_web_test.bzl` points the generated test launcher at the Bzlmod
canonical runfiles path of rules_nodejs
(`+_repo_rules+build_bazel_rules_nodejs`), so the Bash runfiles library is
found when the Karma suites start.

The patch used to also add `typescript` to concatjs's `package.json` so the
Bazel sandbox could find it. Since TypeScript 6.0 the `tsc_wrapped` and
`tsc_wrapped_with_angular` binaries in `tensorboard/defs/BUILD` list
`@npm//typescript` in their `data` instead, so that hunk is gone.

Note that putting the mappings from (2) in the workspace `tsconfig.json` does not
work: the tsconfig Bazel generates does `extends` the workspace one, but it also
Expand All @@ -61,10 +68,10 @@ hunk.
To regenerate:
* `vi node_modules/@bazel/concatjs/internal/common/compilation.bzl`
* `vi node_modules/@bazel/concatjs/internal/common/tsconfig.bzl`
* `vi node_modules/@bazel/concatjs/package.json`
* `vi node_modules/@bazel/concatjs/web_test/karma_web_test.bzl`
* make edits
* `yarn patch-package "@bazel/concatjs" --exclude '^$'` (the `--exclude` is
required, otherwise the `package.json` hunk is dropped)
* `yarn patch-package "@bazel/concatjs" --exclude '^$'` (keep the `--exclude`
so a future `package.json` change is not silently dropped)
* update `third_party/nodejs_extensions.bzl` with the new patch file name


Expand Down
22 changes: 22 additions & 0 deletions tensorboard/defs/BUILD
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,27 @@ tb_proto_library(
ts_library(
name = "strict_types",
srcs = ["strict_type_check.d.ts"],
compiler = ":tsc_wrapped",
)

# Custom ts_library compiler for non-Angular targets.

@arcra arcra Sep 24, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I believe Pablo's PR about Bazel 8 mentioned something about this, but the details are not very clear to me. You might want to sync with them.

@samanoelton samanoelton Oct 23, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

This looks good to me!

#
# Bazel's generated tsc_wrapped binary needs the `typescript` package at runtime,
# but does not include it in its runfiles. This may work locally because the
# execroot's node_modules directory is available, but fails in the sandbox.
# Define the binary here and add `typescript` explicitly so the compiler works
# reliably in both local and sandboxed builds.
#
# Angular targets use tsc_wrapped_with_angular below, which declares the Angular
# compiler dependencies separately.
nodejs_binary(

@psamanoelton psamanoelton Oct 23, 2026

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.

To keep consistency with the last Bazel8 PR could you update this lines (62-69) to be like this?:

nodejs_binary(
    name = "tsc_wrapped",
    data = [
        "@npm//@bazel/concatjs",
        "@npm//typescript",
    ],
    entry_point = "@npm//:node_modules/@bazel/concatjs/internal/tsc_wrapped/tsc_wrapped.js",
    templated_args = ["--nobazel_run_linker"],
    visibility = ["//tensorboard:__subpackages__"],
)

(just add templated_args = ["--nobazel_run_linker"],)

This is not a blocker and the current code is not going to break anything but this update should be good to use the templated_args.

name = "tsc_wrapped",
data = [
"@npm//@bazel/concatjs",
"@npm//typescript",
],
entry_point = "@npm//:node_modules/@bazel/concatjs/internal/tsc_wrapped/tsc_wrapped.js",
visibility = ["//tensorboard:__subpackages__"],
)

# Isolated canary for the modern rules_ts/rules_js stack. Production
Expand All @@ -67,6 +88,7 @@ nodejs_binary(
"@npm//@angular/compiler-cli",
"@npm//@bazel/concatjs",
"@npm//@bazel/typescript",
"@npm//typescript",
],
entry_point = "@npm//:node_modules/@bazel/concatjs/internal/tsc_wrapped/tsc_wrapped.js",
# Disables the Bazel node modules linker. The node module linker is unreliable for the
Expand Down
4 changes: 4 additions & 0 deletions tensorboard/defs/defs.bzl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,10 @@ def tf_ts_library(srcs = [], strict_checks = True, **kwargs):
tsconfig = "//:tsconfig-lax"
kwargs.setdefault("deps", []).extend(["@npm//tslib", "//tensorboard/defs:strict_types"])

# Default to tsc_wrapped from tensorboard/defs/BUILD, see why there.
# tf_ng_module overrides it with tsc_wrapped_with_angular.
kwargs.setdefault("compiler", "//tensorboard/defs:tsc_wrapped")

new_srcs = []

# Find test.ts and testbed.ts files and rename to test.spec.ts to be
Expand Down
4 changes: 2 additions & 2 deletions tensorboard/webapp/runs/views/runs_table/runs_table_module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import {MatPaginatorModule} from '@angular/material/paginator';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatSortModule} from '@angular/material/sort';
import {MatTableModule} from '@angular/material/table';
import {ColorPickerModule} from 'ngx-color-picker';
import {ColorPickerDirective} from 'ngx-color-picker';
import {MatSelectModule} from '@angular/material/select';
import {AlertModule} from '../../../alert/alert_module';
import {DataTableModule} from '../../../widgets/data_table/data_table_module';
Expand All @@ -49,7 +49,7 @@ import {ReactiveFormsModule} from '@angular/forms';

@NgModule({
imports: [
ColorPickerModule,
ColorPickerDirective,
CommonModule,
DataTableModule,
ExperimentAliasModule,
Expand Down
8 changes: 7 additions & 1 deletion tsconfig-lax.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
"downlevelIteration": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
// See tsconfig.json for why this is needed.
"ignoreDeprecations": "6.0",
"importHelpers": true,
"inlineSourceMap": true,
"inlineSources": true,
Expand All @@ -22,7 +24,11 @@
"plugins": [
{
"name": "@bazel/tsetse",
"disabledRules": ["ban-promise-as-condition", "must-use-promises"]
"disabledRules": [
"ban-promise-as-condition",
"must-use-promises",
"ban-expect-truthy-promise"
]
}
],
}
Expand Down
15 changes: 10 additions & 5 deletions tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@
"emitDecoratorMetadata": true,
"exactOptionalPropertyTypes": true,
"experimentalDecorators": true,
// TODO(@cdavalos): Remove this after migrating from @bazel/concatjs to rules_js/rules_ts.

@arcra arcra Sep 24, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

nit: I think your username has a 7 at the end? Same below for any other TODOs you added.

// TypeScript 6.0 rejects deprecated options added by concatjs.
"ignoreDeprecations": "6.0",
"importHelpers": true,
"inlineSourceMap": true,
"lib": ["dom", "es2021", "dom.iterable"],
Expand All @@ -23,11 +26,13 @@
"plugins": [
{
"name": "@bazel/tsetse",
// disabled: concatjs pins tsutils to 3.21.0, which predates TS 5.9 and
// is incompatible with these two rules. ban-promise-as-condition
// crashes the compiler, must-use-promises misfires on the one
// awaited call in alert_display_snackbar_container.ts.
"disabledRules": ["ban-promise-as-condition", "must-use-promises"]
// TODO(@cdavalos): Re-enable these rules after upgrading concatjs and tsutils.
// The current versions are incompatible with TypeScript 6.0.
"disabledRules": [
"ban-promise-as-condition",
"must-use-promises",
"ban-expect-truthy-promise"
]
}
]
},
Expand Down
Loading
Loading