Skip to content

Angular upgrade v17 to v18 #7099

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 4 commits into
base: master
Choose a base branch
from
Open

Angular upgrade v17 to v18 #7099

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8f0ebe4
1st draf of angular upgrade v17 to v18 to verify CI
cdavalos7 Apr 23, 2026
0866d00
Linter fix for failing workflows lint-misc and lint-frontend
cdavalos7 Apr 27, 2026
292b001
Updated formatting in styling files
cdavalos7 Apr 27, 2026
e3a7d4d
test run CI
cdavalos7 Apr 29, 2026
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
2 changes: 1 addition & 1 deletion WORKSPACE
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ node_repositories(
yarn_install(
name = "npm",
data = [
"//patches:@angular+build-tooling+0.0.0-2113cd7f66a089ac0208ea84eee672b2529f4f6c.patch",
"//patches:@angular+build-tooling+0.0.0-db91da4e742cd081bfba01db2edc4e816018419b.patch",
"//patches:@bazel+concatjs+5.8.1.patch",
Copy link
Copy Markdown
Member

@arcra arcra Apr 27, 2026

Choose a reason for hiding this comment

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

I remember on the previous upgrade (#7085 ), there was a comment about the upgrade to concatjs 5.8.1.

I was under the impression we'd need to do this for this next migration. Was this not the case? This might be a bit related with upgrading our bazel set-up with new dependencies, potentially using bazel modules, that Pablo might be working on at some point, so perhaps this is the reason?

Copy link
Copy Markdown
Contributor Author

@cdavalos7 cdavalos7 Apr 28, 2026

Choose a reason for hiding this comment

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

Current versions @bazel/concatjs, @bazel/esbuild, @bazel/typescript: still 5.8.1 are still compatible with Angular 18.

I plan to wait until Angular dependencies are not compatible anymore with @bazel(-angular) dependencies to update those packages. If we reach 21 without replacing @bazel/concatjs with rules_nodejs I can create a follow-up task to do this major change.

rules_nodejs 6.x is a major change, it removes @bazel/concatjs, @bazel/esbuild, @bazel/typescript entirely and replaces them with the new rules_js / aspect_rules_js system. It rewrites how Bazel loads npm packages and runs TypeScript and esbuild.

],
# "Some rules only work by referencing labels nested inside npm packages
Expand Down
40 changes: 21 additions & 19 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,12 @@
},
"homepage": "https://github.com/tensorflow/tensorboard#readme",
"devDependencies": {
"@angular-devkit/build-angular": "^17.0.0",
"@angular/build-tooling": "https://github.com/angular/dev-infra-private-build-tooling-builds.git#3069be882e3e41cdb3dad58788d878e31d7d82e8",
"@angular/cli": "^17.0.0",
"@angular/compiler": "17.3.12",
"@angular/compiler-cli": "^17.0.0",
"@angular-devkit/build-angular": "^18.0.0",
"@angular/build": "^18.0.0",
"@angular/build-tooling": "https://github.com/angular/dev-infra-private-build-tooling-builds.git#c2de5cda47188d1ed960cd3c6fa9f4b699ba1001",
"@angular/cli": "^18.0.0",
"@angular/compiler": "18.2.14",
"@angular/compiler-cli": "^18.0.0",
"@babel/core": "^7.16.12",
"@bazel/concatjs": "5.8.1",
"@bazel/esbuild": "5.8.1",
Expand Down Expand Up @@ -61,22 +62,22 @@
"prettier-plugin-organize-imports": "2.3.4",
"requirejs": "^2.3.7",
"tslib": "^2.3.0",
"typescript": "5.2.2",
"typescript": "5.4.5",
"yarn-deduplicate": "^5.0.0"
},
"dependencies": {
"@angular/animations": "^17.0.0",
"@angular/cdk": "^17.0.0",
"@angular/common": "17.3.12",
"@angular/core": "^17.0.0",
"@angular/forms": "^17.0.0",
"@angular/localize": "^17.0.0",
"@angular/material": "^17.0.0",
"@angular/platform-browser": "^17.0.0",
"@angular/platform-browser-dynamic": "^17.0.0",
"@angular/router": "^17.0.0",
"@ngrx/effects": "^17.0.0",
"@ngrx/store": "^17.0.0",
"@angular/animations": "^18.0.0",
"@angular/cdk": "^18.0.0",
"@angular/common": "18.2.14",
"@angular/core": "^18.0.0",
"@angular/forms": "^18.0.0",
"@angular/localize": "^18.0.0",
"@angular/material": "^18.0.0",
"@angular/platform-browser": "^18.0.0",
"@angular/platform-browser-dynamic": "^18.0.0",
"@angular/router": "^18.0.0",
"@ngrx/effects": "^18.0.0",
"@ngrx/store": "^18.0.0",
"@polymer/decorators": "^3.0.0",
"@polymer/iron-behaviors": "^3.0.1",
"@polymer/iron-collapse": "^3.0.1",
Expand Down Expand Up @@ -139,7 +140,8 @@
"@types/d3-transition": "1.3.6",
"@types/d3-zoom": "1.8.7",
"@types/d3-drag": "1.2.8",
"@types/d3-scale-chromatic": "1.5.4"
"@types/d3-scale-chromatic": "1.5.4",
"selenium-webdriver": "4.27.0"
},
"packageManager": "yarn@1.22.22"
}
27 changes: 7 additions & 20 deletions ...d7f66a089ac0208ea84eee672b2529f4f6c.patch → ...a4e742cd081bfba01db2edc4e816018419b.patch
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,20 @@
diff --git a/node_modules/@angular/build-tooling/shared-scripts/angular-optimization/BUILD.bazel b/node_modules/@angular/build-tooling/shared-scripts/angular-optimization/BUILD.bazel
index 870da1b..3f1e5c5 100755
--- a/node_modules/@angular/build-tooling/shared-scripts/angular-optimization/BUILD.bazel
+++ b/node_modules/@angular/build-tooling/shared-scripts/angular-optimization/BUILD.bazel
@@ -23,6 +23,7 @@ js_library(
deps = [
"@npm//@babel/core",
"@npm//@babel/helper-annotate-as-pure",
+ "@npm//@babel/helper-split-export-declaration",
],
)

diff --git a/node_modules/@angular/build-tooling/shared-scripts/angular-optimization/esbuild-plugin.mjs b/node_modules/@angular/build-tooling/shared-scripts/angular-optimization/esbuild-plugin.mjs
index 6d5ec3f..ad4217f 100755
--- a/node_modules/@angular/build-tooling/shared-scripts/angular-optimization/esbuild-plugin.mjs
+++ b/node_modules/@angular/build-tooling/shared-scripts/angular-optimization/esbuild-plugin.mjs
@@ -86,11 +86,11 @@ export async function createEsbuildAngularOptimizePlugin(opts, additionalBabelPl
devkitOptimizePlugins.adjustTypeScriptEnumsPlugin,
);
@@ -55,11 +55,11 @@
if (opts.optimize) {
plugins.push(adjustStaticMembers, adjustTypeScriptEnums, elideAngularMetadata);

- // If the current file is denoted as explicit side effect free, add the pure
- // top-level functions optimization plugin for this file.
- if (opts.optimize.isSideEffectFree && opts.optimize.isSideEffectFree(args.path)) {
- plugins.push(devkitOptimizePlugins.pureToplevelFunctionsPlugin);
- plugins.push(markTopLevelPure);
- }
+ // For TensorBoard: This plugin aggressively culls symbols in a way that
+ // is incompatible with TensorBoard source. Disable it. As result the binary is bigger.
+ //if (opts.optimize.isSideEffectFree && opts.optimize.isSideEffectFree(args.path)) {
+ // plugins.push(devkitOptimizePlugins.pureToplevelFunctionsPlugin);
+ // plugins.push(markTopLevelPure);
+ //}
}

const shouldRunLinker =
12 changes: 6 additions & 6 deletions tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/_lib.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ limitations under the License.
@use '@angular/material' as matm2var;

@mixin debugger-op-type {
background-color: matm2.get-color-from-palette(
matm2var.$blue-grey-palette,
background-color: matm2.m2-get-color-from-palette(
matm2var.$m2-blue-grey-palette,
50
);
@include tb-theme-foreground-prop(border, border, 1px solid);
Expand All @@ -31,8 +31,8 @@ limitations under the License.
width: max-content;

@include tb-dark-theme {
background-color: matm2.get-color-from-palette(
matm2var.$blue-grey-palette,
background-color: matm2.m2-get-color-from-palette(
matm2var.$m2-blue-grey-palette,
700
);
}
Expand All @@ -42,8 +42,8 @@ limitations under the License.
background-color: #fff099;

@include tb-dark-theme {
background-color: matm2.get-color-from-palette(
matm2var.$orange-palette,
background-color: matm2.m2-get-color-from-palette(
matm2var.$m2-orange-palette,
900
);
}
Expand Down
9 changes: 6 additions & 3 deletions ...gins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,16 +47,19 @@ limitations under the License.
}

.focus-execution-container {
background-color: matm2.get-color-from-palette(matm2var.$orange-palette, 200);
background-color: matm2.m2-get-color-from-palette(
matm2var.$m2-orange-palette,
200
);
border-radius: 4px;
font-size: 12px;
height: 120px;
padding: 5px;
width: 360px;

@include tb-dark-theme {
background-color: matm2.get-color-from-palette(
matm2var.$orange-palette,
background-color: matm2.m2-get-color-from-palette(
matm2var.$m2-orange-palette,
900
);
}
Expand Down
2 changes: 1 addition & 1 deletion tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_op_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ limitations under the License.
padding: 2px 6px;
text-align: right;
width: 200px;
$grey-600: matm2.get-color-from-palette(matm2var.$grey-palette, 600);
$grey-600: matm2.m2-get-color-from-palette(matm2var.$m2-grey-palette, 600);

@include tb-dark-theme {
box-shadow: 1px 3px $grey-600;
Expand Down
9 changes: 1 addition & 8 deletions tensorboard/tools/whitespace_hygiene_test.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,7 @@
import sys


# @TODO(@cdavalos7): Remove this exception when the patch file is no longer needed.
# Patch files use a trailing space on blank lines to mark them as context.
# This is required by patch-package and cannot be removed.
exceptions = frozenset(
[
"patches/@angular+build-tooling+0.0.0-2113cd7f66a089ac0208ea84eee672b2529f4f6c.patch",
]
)
exceptions = frozenset()


@dataclasses.dataclass(frozen=True)
Expand Down
4 changes: 2 additions & 2 deletions tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,14 @@ limitations under the License.

.message {
.warning {
color: matm2.get-color-from-palette($tb-warn);
color: matm2.m2-get-color-from-palette($tb-warn);
}

margin-bottom: 16px;
}

.note-1 {
color: matm2.get-color-from-palette($tb-accent);
color: matm2.m2-get-color-from-palette($tb-accent);
}

.scrolling-page {
Expand Down
2 changes: 1 addition & 1 deletion tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ $_title-to-heading-gap: 12px;
}

:host ::ng-deep .mat-slider-min-value .mat-slider-thumb {
background-color: matm2.get-color-from-palette($tb-primary);
background-color: matm2.m2-get-color-from-palette($tb-primary);
}

:host ::ng-deep .hide-slider.mat-slider-horizontal .mat-slider-track-wrapper {
Expand Down
7 changes: 5 additions & 2 deletions tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,10 +207,13 @@ $_data_table_initial_height: 100px;
align-items: center;

.expand-button {
color: matm2.get-color-from-palette($tb-foreground, secondary-text);
color: matm2.m2-get-color-from-palette($tb-foreground, secondary-text);

@include tb-dark-theme {
color: matm2.get-color-from-palette($tb-dark-foreground, secondary-text);
color: matm2.m2-get-color-from-palette(
$tb-dark-foreground,
secondary-text
);
background-color: map-get($tb-dark-background, background);
}
}
Expand Down
8 changes: 4 additions & 4 deletions ...board/webapp/metrics/views/card_renderer/vis_linked_time_selection_warning_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,17 @@ limitations under the License.
@import 'tensorboard/webapp/theme/tb_theme';

:host {
color: matm2.get-color-from-palette(
map-get(matm2.get-color-config($tb-theme), warn),
color: matm2.m2-get-color-from-palette(
map-get(matm2.m2-get-color-config($tb-theme), warn),
700
);
height: 1em;
line-height: 0;
display: inline-flex;

@include tb-dark-theme {
color: matm2.get-color-from-palette(
map-get(matm2.get-color-config($tb-dark-theme), warn),
color: matm2.m2-get-color-from-palette(
map-get(matm2.m2-get-color-config($tb-dark-theme), warn),
700
);
}
Expand Down
2 changes: 1 addition & 1 deletion tensorboard/webapp/metrics/views/main_view/filter_input_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ tb-filter-input {
@include tb-theme-foreground-prop(color, text);

&:not(.valid) {
$_error-color: matm2.get-color-from-palette($tb-warn, 800);
$_error-color: matm2.m2-get-color-from-palette($tb-warn, 800);

color: $_error-color;

Expand Down
15 changes: 9 additions & 6 deletions tensorboard/webapp/metrics/views/main_view/main_view_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ mat-button-toggle-group.filter-view {
.main,
.sidebar {
contain: strict;
background-color: matm2.get-color-from-palette($tb-background, background);
background-color: matm2.m2-get-color-from-palette($tb-background, background);
overflow-x: hidden;
overflow-y: auto;
will-change: transform, scroll-position;
Expand All @@ -99,7 +99,7 @@ mat-button-toggle-group.filter-view {
}

.main {
background-color: matm2.get-color-from-palette($tf-slate, 200);
background-color: matm2.m2-get-color-from-palette($tf-slate, 200);
flex: 1 1;
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -155,16 +155,19 @@ mat-button-toggle-group.filter-view {

/** TODO(psybuzz): consider making a tb-button instead. */
:host .settings-button {
color: matm2.get-color-from-palette($tb-foreground, secondary-text);
color: matm2.m2-get-color-from-palette($tb-foreground, secondary-text);
display: inline-flex;

@include tb-dark-theme {
color: matm2.get-color-from-palette($tb-dark-foreground, secondary-text);
color: matm2.m2-get-color-from-palette($tb-dark-foreground, secondary-text);
}

&.checked {
@include tb-theme-background-prop(background-color, selected-button);
border-color: matm2.get-color-from-palette(matm2var.$grey-palette, 300);
border-color: matm2.m2-get-color-from-palette(
matm2var.$m2-grey-palette,
300
);
}

::ng-deep .mat-button-wrapper {
Expand All @@ -178,7 +181,7 @@ mat-button-toggle-group.filter-view {
}

.slide-out-menu {
background-color: matm2.get-color-from-palette($tb-background, background);
background-color: matm2.m2-get-color-from-palette($tb-background, background);
// Make the menu the full height minus the size of the toolbar.
height: calc(100% - 49px);
position: absolute;
Expand Down
2 changes: 1 addition & 1 deletion tensorboard/webapp/metrics/views/main_view/pinned_view_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ mat-icon {

.new-card-pinned {
animation: pinned-view-fade-out 3s linear;
background: matm2.get-color-from-palette(matm2var.$red-palette, 500);
background: matm2.m2-get-color-from-palette(matm2var.$m2-red-palette, 500);
border-radius: 5px;
color: #fff;
display: inline-block;
Expand Down
13 changes: 8 additions & 5 deletions tensorboard/webapp/metrics/views/metrics_container.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,13 @@ limitations under the License.

.notice {
background-color: rgba(
matm2.get-color-from-palette(matm2var.$yellow-palette, 200),
matm2.m2-get-color-from-palette(matm2var.$m2-yellow-palette, 200),
0.85
);
$yellow-500: matm2.get-color-from-palette(matm2var.$yellow-palette, 500);
$yellow-500: matm2.m2-get-color-from-palette(
matm2var.$m2-yellow-palette,
500
);
border-bottom: 1px solid $yellow-500;
color: map-get($tb-foreground, text);
display: block;
Expand All @@ -44,15 +47,15 @@ tb-dashboard-layout {
}

nav {
background-color: matm2.get-color-from-palette($tb-background, background);
$border: matm2.get-color-from-palette($tb-foreground, border);
background-color: matm2.m2-get-color-from-palette($tb-background, background);
$border: matm2.m2-get-color-from-palette($tb-foreground, border);
border-right: 1px solid $border;
flex: none;
width: 340px;

@include tb-dark-theme {
background-color: map-get($tb-dark-background, background);
border-right-color: matm2.get-color-from-palette(
border-right-color: matm2.m2-get-color-from-palette(
$tb-dark-foreground,
border
);
Expand Down
Loading
Loading