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

Merged
cdavalos7 merged 3 commits into from
Jun 16, 2026
Merged

Angular upgrade v17 to v18 #7099

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e84b463
Angular upgrade 18 changes. Returned files to original state before r…
cdavalos7 Jun 11, 2026
619752c
Remove unused @angular/material aliases from SCSS files
cdavalos7 Jun 11, 2026
80da25b
Fixed linter and returned needed variable
cdavalos7 Jun 11, 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 @@ -237,7 +237,7 @@ yarn_install(
# this Bazel/CI setup. Apply the generated patch artifacts directly during
# yarn_install instead.
post_install_patches = [
"//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",
],
yarn_lock = "//:yarn.lock",
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"

@arcra arcra Jun 12, 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.

This seems to be a new dependency? Do you know if this was bundled with something else before this version, and that's why it's added here now?

@cdavalos7 cdavalos7 Jun 16, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Yes, it was bundled before under the scenes pulled by other libraries. The new v18 build tooling asks for a newer version of it, and yarn would normally grab the latest one. But the latest versions need Node 20, and we're still on Node 18, so they'd break our build.

We shouldn't need it when we have node.js 20.

},
"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

@arcra arcra Jun 12, 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.

It seems like all of this is being commented out from the patch? Should it just be removed? Or am I misunderstanding something?

@cdavalos7 cdavalos7 Jun 15, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Because its a patch from a file that exists in node_modules it is best practice to comment out the original code instead of deleting it, so any developer can know what was deleted from the original file.

I can delete it, but I think is better to keep to know what was disabled from node_modules/@angular/build-tooling/shared-scripts/angular-optimization/esbuild-plugin.mjs

+ // 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 =
13 changes: 6 additions & 7 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 @@ -12,13 +12,12 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/
@use '@angular/material' as mat;
@use '@angular/material' as matm2;
@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 +30,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 +41,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
10 changes: 6 additions & 4 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 @@ -12,7 +12,6 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/
@use '@angular/material' as mat;
@use '@angular/material' as matm2;
@use '@angular/material' as matm2var;
@import 'tensorboard/webapp/theme/tb_theme';
Expand Down Expand Up @@ -47,16 +46,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
3 changes: 1 addition & 2 deletions 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 @@ -12,7 +12,6 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/
@use '@angular/material' as mat;
@use '@angular/material' as matm2;
@use '@angular/material' as matm2var;
@import 'tensorboard/webapp/theme/tb_theme';
Expand All @@ -33,7 +32,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
4 changes: 1 addition & 3 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,12 +25,10 @@
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.
# This is required by patch format and cannot be removed.
exceptions = frozenset(
[
"patches/@angular+build-tooling+0.0.0-2113cd7f66a089ac0208ea84eee672b2529f4f6c.patch",

@arcra arcra Jun 12, 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 realize this is a test, but does this mean the patch is no longer needed? It seems the file still exists, above. Should that file just be removed altogether? Or is it the case that it's not needed only for the test, for some reason?

@cdavalos7 cdavalos7 Jun 16, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

The list of frozenset exceptions it's just the list of files the whitespace test skips. Package patches add trailing spaces on blank lines (the patch format needs them), so those files would fail the check otherwise.

It fails in the CI/lint that essentially reviews formatting of the files.

This patch for this version was wrote by hand without those trailing spaces, so it has no whitespace issues to skip. The test also fails if you list a file that doesn't actually need it, so keeping it there would just break CI. Only the protobuf patch still has a trailing space, so that's the only one left.

I hope my explanation was clear about it, let me know otherwise

"patches/protobuf_6_31_1_java_export.patch",
]
)
Expand Down
6 changes: 2 additions & 4 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 @@ -12,21 +12,19 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/
@use '@angular/material' as mat;
@use '@angular/material' as matm2;
@use '@angular/material' as matm2var;
@import 'tensorboard/webapp/theme/tb_theme';

.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
4 changes: 1 addition & 3 deletions 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 @@ -12,9 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/
@use '@angular/material' as mat;
@use '@angular/material' as matm2;
@use '@angular/material' as matm2var;
@import 'tensorboard/webapp/theme/tb_theme';
@import '../common';

Expand Down Expand Up @@ -155,7 +153,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
9 changes: 5 additions & 4 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 @@ -12,9 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/
@use '@angular/material' as mat;
@use '@angular/material' as matm2;
@use '@angular/material' as matm2var;
@import 'tensorboard/webapp/theme/tb_theme';
@import '../common';

Expand Down Expand Up @@ -207,10 +205,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
10 changes: 4 additions & 6 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 @@ -12,23 +12,21 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/
@use '@angular/material' as mat;
@use '@angular/material' as matm2;
@use '@angular/material' as matm2var;
@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
4 changes: 1 addition & 3 deletions 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 @@ -12,9 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/
@use '@angular/material' as mat;
@use '@angular/material' as matm2;
@use '@angular/material' as matm2var;
@import 'tensorboard/webapp/theme/tb_theme';

.tag-filter {
Expand All @@ -30,7 +28,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
16 changes: 9 additions & 7 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 @@ -12,7 +12,6 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/
@use '@angular/material' as mat;
@use '@angular/material' as matm2;
@use '@angular/material' as matm2var;
@import 'tensorboard/webapp/theme/tb_theme';
Expand Down Expand Up @@ -88,7 +87,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 +98,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 +154,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 +180,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
Loading
Loading