Skip to content

Commit

Permalink
Upgrade angular from v12 to v14
Browse files Browse the repository at this point in the history
Few changes:
- upgrade rules_nodejs to 5.7.0 (this will extend the nodejs versions available for installation, while we are installing the default nodejs version here with the 5.7.0 rules_nodejs toolchain)
  - following this, upgrade all bazel toolchain to 5..7.0
- correspondingly upgrade rules_sass version to 1.55.0 (I can only find rules_sass github codebase with given version tag, but not sure how to find its hash..etc. Here we are basically following tensorboard team's current setup)
- upgrade angular (and all relative packages) to v14, correspondingly upgrade ngrx to v14, and bump up rxjs.
- upgrade typescript to 4.7.4
- upgrade zone.js to 0.12.0
- import ts_library (used for bazel build) from concatjs instead of typescript, as the module is moved to concatjs. (Also added concatjs into data field of `tsc_wrapped_with_angular` target)
- added name field to the output of `rollup.config.js`, as it is a required field now for iife output type
- Added `node_modules` into `include_paths` of sass_binary build rule when building the `styles.css` file for frontend. This is because angular v14 changed to import angular/cdk from using a relative path to an new one like `@angular/cdk`, so we need to include the `node_modules` int the the searching paths to enable sassCompiler to find the theming file.
- yarn_install's exports_directories_only property now defaults to True. We must set this to False in order to remain compatible with ts_library
See: https://github.com/bazelbuild/rules_nodejs/wiki/Migrating-to-5.0#exports_directories_only
- No longer need to override node_version as rules_nodejs default version of node is now 16.12.0.
See: https://github.com/bazelbuild/rules_nodejs/wiki/Migrating-to-5.0#updated-defaults
We were overriding this only because rules_nodejs defaul version of node was too old.

**References**
- migrating to rules_nodejs 5.0: https://github.com/bazelbuild/rules_nodejs/wiki/Migrating-to-5.0
  - Instructions for 5.7.0 specifically: https://github.com/bazelbuild/rules_nodejs/releases/tag/5.7.0
- Tensorboard team's angular upgrade notes: No longer need to override node_version as rules_nodejs default version of node is now 16.12.0.
See: https://github.com/bazelbuild/rules_nodejs/wiki/Migrating-to-5.0#updated-defaults
We were overriding this only because rules_nodejs defaul version of node was too old.
- other relative tensorboard upgrade PRs (tons of information in the PR messasge):
tensorflow/tensorboard#5977
tensorflow/tensorboard#6063
tensorflow/tensorboard#6066

**Notes**
Since then, the tensorboard_plugin_profiler build process mostly follows tensorboard's setup, but we are diverging moving forward as following:
(1) The tensorboard team changed to use esbuild to bundle the js file instead of rollup (see tensorflow/tensorboard#5829). We may consider switching to esbuild in the future as well given its potential better performance, but now since it's not blocking us, we remain to use rollup.
(2) The tensorboard team uses angular teams internal toolchain to build angular with bazel for angular v13+ (see tensorflow/tensorboard#6049). Since we turns out don't have the issue tensorboard is facing when upgrading angular, we are fine to go forward without changing our bundling rules. And we tend not to because the toolchain is not publicly used and there's no guarantee on supporting in the future.

PiperOrigin-RevId: 537957341
  • Loading branch information
zzzaries authored and copybara-github committed Jun 5, 2023
1 parent 53defad commit 4ab4fa5
Show file tree
Hide file tree
Showing 7 changed files with 644 additions and 516 deletions.
36 changes: 20 additions & 16 deletions WORKSPACE
Original file line number Diff line number Diff line change
Expand Up @@ -67,36 +67,40 @@ rules_closure_dependencies(

http_archive(
name = "build_bazel_rules_nodejs",
sha256 = "d63ecec7192394f5cc4ad95a115f8a6c9de55c60d56c1f08da79c306355e4654",
sha256 = "c29944ba9b0b430aadcaf3bf2570fece6fc5ebfb76df145c6cdad40d65c20811",
urls = [
"http://mirror.tensorflow.org/github.com/bazelbuild/rules_nodejs/releases/download/4.6.1/rules_nodejs-4.6.1.tar.gz",
"https://github.com/bazelbuild/rules_nodejs/releases/download/4.6.1/rules_nodejs-4.6.1.tar.gz",
"http://mirror.tensorflow.org/github.com/bazelbuild/rules_nodejs/releases/download/5.7.0/rules_nodejs-5.7.0.tar.gz",
"https://github.com/bazelbuild/rules_nodejs/releases/download/5.7.0/rules_nodejs-5.7.0.tar.gz",
],
)

load("@build_bazel_rules_nodejs//:index.bzl", "node_repositories", "yarn_install")
node_repositories(
node_version = "12.21.0",
)
load("@build_bazel_rules_nodejs//:repositories.bzl", "build_bazel_rules_nodejs_dependencies")
build_bazel_rules_nodejs_dependencies()
load("@build_bazel_rules_nodejs//:index.bzl", "yarn_install")

yarn_install(
name = "npm",
# "Some rules only work by referencing labels nested inside npm packages
# and therefore require turning off exports_directories_only."
# This includes "ts_library".
# See: https://github.com/bazelbuild/rules_nodejs/wiki/Migrating-to-5.0#exports_directories_only
exports_directories_only = False,
package_json = "//:package.json",
yarn_lock = "//:yarn.lock",
# Opt out of symlinking local node_modules folder into bazel internal
# directory. Symlinking is incompatible with our toolchain which often
# removes source directory without `bazel clean` which creates broken
# symlink into node_modules folder.
symlink_node_modules = False,
)

# rules_sass release information is difficult to find but it does seem to
# regularly release with same cadence and version as core sass.
# We typically upgrade this library whenever we upgrade rules_nodejs.
#
# rules_sass 1.55.0: https://github.com/bazelbuild/rules_sass/tree/1.55.0
http_archive(
name = "io_bazel_rules_sass",
sha256 = "ee6d527550d42af182673c3718da98bb9205cabdeb08eacc0e3767fa3f2b051a",
strip_prefix = "rules_sass-1.49.11",
sha256 = "1ea0103fa6adcb7d43ff26373b5082efe1d4b2e09c4f34f8a8f8b351e9a8a9b0",
strip_prefix = "rules_sass-1.55.0",
urls = [
"http://mirror.tensorflow.org/github.com/bazelbuild/rules_sass/archive/1.49.11.zip",
"https://github.com/bazelbuild/rules_sass/archive/1.49.11.zip",
"http://mirror.tensorflow.org/github.com/bazelbuild/rules_sass/archive/1.55.0.zip",
"https://github.com/bazelbuild/rules_sass/archive/1.55.0.zip",
],
)

Expand Down
3 changes: 2 additions & 1 deletion defs/BUILD.bazel
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ nodejs_binary(
name = "tsc_wrapped_with_angular",
data = [
"@npm//@angular/compiler-cli",
"@npm//@bazel/concatjs",
"@npm//@bazel/typescript",
],
entry_point = "@npm//:node_modules/@bazel/typescript/internal/tsc_wrapped/tsc_wrapped.js",
entry_point = "@npm//:node_modules/@bazel/concatjs/internal/tsc_wrapped/tsc_wrapped.js",
visibility = ["//:__subpackages__"],
)
2 changes: 1 addition & 1 deletion defs/defs.bzl
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

"""External-only delegates for various BUILD rules."""

load("@npm//@bazel/typescript:index.bzl", "ts_library")
load("@npm//@bazel/concatjs:index.bzl", "ts_library")

def _convert_paths_to_absolute_impl(ctx):
"""Implementation of convert_paths_to_absolute.
Expand Down
6 changes: 6 additions & 0 deletions frontend/BUILD
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,12 @@ sass_library(
sass_binary(
name = "css",
src = "styles.scss",
# @use was very different in angular v13.x using a relative path @use '../../../cdk/a11y'
# instead to the new one in v14.x @use '@angular/cdk'
# need to include the node_modules path to enable sass to find the theming file
include_paths = [
"node_modules",
],
output_name = "styles.css",
sourcemap = False,
deps = [
Expand Down
48 changes: 24 additions & 24 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,25 +28,25 @@
},
"homepage": "https://github.com/tensorflow/profiler#readme",
"devDependencies": {
"@angular/cli": "^12.2.0",
"@angular/compiler": "^12.2.0",
"@angular/compiler-cli": "^12.2.0",
"@angular/cli": "^14.2.9",
"@angular/compiler": "^14.2.11",
"@angular/compiler-cli": "^14.2.11",
"@bazel/bazelisk": "^1.7.5",
"@bazel/ibazel": "^0.15.9",
"@bazel/jasmine": "^4.6.1",
"@bazel/concatjs": "^4.6.1",
"@bazel/rollup": "^4.6.1",
"@bazel/typescript": "^4.6.1",
"@bazel/jasmine": "^5.7.0",
"@bazel/concatjs": "^5.7.0",
"@bazel/rollup": "^5.7.0",
"@bazel/typescript": "^5.7.0",
"@types/chai": "^4.2.7",
"@types/google.visualization": "0.0.65",
"@types/jasmine": "^3.5.0",
"@types/node": "^13.1.2",
"@types/sinon": "^7.5.1",
"tslib": "^2.0.1",
"tslib": "^2.3.6",
"chai": "^4.2.0",
"prettier": "1.18.2",
"sinon": "^7.4.2",
"typescript": "4.3.5",
"typescript": "4.7.4",
"rollup": "^2.56.2",
"@rollup/plugin-commonjs": "^20.0.0",
"@rollup/plugin-node-resolve": "^13.0.4",
Expand All @@ -64,22 +64,22 @@
"terser": "^5.6.0"
},
"dependencies": {
"@angular/animations": "^12.2.0",
"@angular/cdk": "^12.2.0",
"@angular/common": "^12.2.0",
"@angular/core": "^12.2.0",
"@angular/forms": "^12.2.0",
"@angular/localize": "^12.2.0",
"@angular/material": "^12.2.3",
"@angular/platform-browser": "^12.2.0",
"@angular/platform-browser-dynamic": "^12.2.0",
"@angular/router": "^12.2.0",
"@ngrx/effects": "^12.3.0",
"@ngrx/store": "^12.3.0",
"@angular/animations": "^14.2.11",
"@angular/cdk": "^14.2.7",
"@angular/common": "^14.2.11",
"@angular/core": "^14.2.11",
"@angular/forms": "^14.2.11",
"@angular/localize": "^14.2.11",
"@angular/material": "^14.2.7",
"@angular/platform-browser": "^14.2.11",
"@angular/platform-browser-dynamic": "^14.2.11",
"@angular/router": "^14.2.11",
"@ngrx/effects": "^14.3.2",
"@ngrx/store": "^14.3.2",
"@polymer/polymer": "^3.4.1",
"tslib": "^2.0.1",
"rxjs": "^7.3.0",
"zone.js": "^0.11.4"
"tslib": "^2.3.6",
"rxjs": "^7.5.7",
"zone.js": "^0.12.0"
},
"overrides": {
"minimist" : "1.2.6",
Expand Down
2 changes: 2 additions & 0 deletions rollup.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ module.exports = {
commonjs(),
],
output: {
// Name field is required for iife|umd file format
name: 'tbp',
strict: false,
format: 'iife',
sourcemap: false,
Expand Down
Loading

0 comments on commit 4ab4fa5

Please sign in to comment.