infra: upgrade frontend dependencies (#4376)

This change upgrades our dependencies. Namely,
- angular
- bazel/angular
- rxjs
- NOT ngrx (ngrx10 causes karma test to fail)

Author: stephanwlee

BUILD

@@ -1,4 +1,4 @@
-load("@npm_bazel_typescript//:index.bzl", "ts_config")
+load("@npm//@bazel/typescript:index.bzl", "ts_config")
 
 licenses(["notice"])
 

WORKSPACE

@@ -13,9 +13,11 @@ http_archive(
 )
 
 load("@io_bazel_rules_webtesting//web:repositories.bzl", "web_test_repositories")
+
 web_test_repositories(omit_bazel_skylib = True)
 
 load("@io_bazel_rules_webtesting//web:py_repositories.bzl", "py_repositories")
+
 py_repositories()
 
 http_archive(
@@ -29,6 +31,7 @@ http_archive(
 )
 
 load("@io_bazel_rules_closure//closure:repositories.bzl", "rules_closure_dependencies")
+
 rules_closure_dependencies(
     omit_bazel_skylib = True,
     omit_com_google_protobuf = True,
@@ -37,10 +40,10 @@ rules_closure_dependencies(
 
 http_archive(
     name = "build_bazel_rules_nodejs",
-    sha256 = "f9e7b9f42ae202cc2d2ce6d698ccb49a9f7f7ea572a78fd451696d03ef2ee116",
+    sha256 = "4952ef879704ab4ad6729a29007e7094aef213ea79e9f2e94cbe1c9a753e63ef",
     urls = [
-        "http://mirror.tensorflow.org/github.com/bazelbuild/rules_nodejs/releases/download/1.6.0/rules_nodejs-1.6.0.tar.gz",
-        "https://github.com/bazelbuild/rules_nodejs/releases/download/1.6.0/rules_nodejs-1.6.0.tar.gz",
+        "http://mirror.tensorflow.org/github.com/bazelbuild/rules_nodejs/releases/download/2.2.0/rules_nodejs-2.2.0.tar.gz",
+        "https://github.com/bazelbuild/rules_nodejs/releases/download/2.2.0/rules_nodejs-2.2.0.tar.gz",
     ],
 )
 
@@ -49,18 +52,14 @@ load("@build_bazel_rules_nodejs//:index.bzl", "yarn_install")
 yarn_install(
     name = "npm",
     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,
+    yarn_lock = "//:yarn.lock",
 )
 
-load("@npm//:install_bazel_dependencies.bzl", "install_bazel_dependencies")
-
-install_bazel_dependencies()
-
 http_archive(
     name = "io_bazel_rules_sass",
     sha256 = "9dcfba04e4af896626f4760d866f895ea4291bc30bf7287887cefcf4707b6a62",
@@ -71,6 +70,16 @@ http_archive(
     ],
 )
 
+# Load @bazel/protractor dependencies
+load("@npm//@bazel/protractor:package.bzl", "npm_bazel_protractor_dependencies")
+
+npm_bazel_protractor_dependencies()
+
+# Load @bazel/karma dependencies
+load("@npm//@bazel/karma:package.bzl", "npm_bazel_karma_dependencies")
+
+npm_bazel_karma_dependencies()
+
 http_archive(
     name = "org_tensorflow",
     # NOTE: when updating this, MAKE SURE to also update the protobuf_js runtime version
@@ -84,9 +93,11 @@ http_archive(
 )
 
 load("@org_tensorflow//tensorflow:workspace.bzl", "tf_workspace")
+
 tf_workspace()
 
 load("@bazel_skylib//lib:versions.bzl", "versions")
+
 # Keep this version in sync with the BAZEL environment variable defined
 # in our .github/workflows/ci.yml config.
 versions.check(minimum_bazel_version = "3.7.0")
@@ -120,4 +131,5 @@ http_archive(
 
 # Please add all new dependencies in workspace.bzl.
 load("//third_party:workspace.bzl", "tensorboard_workspace")
+
 tensorboard_workspace()

package.json

@@ -7,7 +7,7 @@
     "doc": "docs"
   },
   "scripts": {
-    "postinstall": "ngcc -p main es2015",
+    "postinstall": "ngcc",
     "build": "bazel build //...",
     "test": "ibazel test //...",
     "lint": "prettier --check 'tensorboard/**/*.'{css,html,js,ts,scss} .github/**/*.yml",
@@ -28,20 +28,19 @@
   },
   "homepage": "https://github.com/tensorflow/tensorboard#readme",
   "devDependencies": {
-    "@angular/bazel": "^9.0.0",
-    "@angular/cli": "^9.1.2",
-    "@angular/compiler": "^9.0.0",
-    "@angular/compiler-cli": "^9.0.0",
-    "@bazel/bazel": "2.1",
-    "@bazel/ibazel": "^0.12.4",
-    "@bazel/jasmine": "^1.6.0",
-    "@bazel/karma": "1.6.0",
-    "@bazel/protractor": "^1.6.0",
-    "@bazel/rollup": "^1.6.0",
-    "@bazel/terser": "^1.6.0",
-    "@bazel/typescript": "^1.6.0",
-    "@rollup/plugin-commonjs": "^14.0.0",
-    "@rollup/plugin-node-resolve": "^8.4.0",
+    "@angular/bazel": "10.2.3",
+    "@angular/cli": "^10.1.1",
+    "@angular/compiler": "^10.1.2",
+    "@angular/compiler-cli": "^10.1.2",
+    "@bazel/ibazel": "^0.14.0",
+    "@bazel/jasmine": "^2.3.0",
+    "@bazel/karma": "^2.3.0",
+    "@bazel/protractor": "^2.3.0",
+    "@bazel/rollup": "^2.3.0",
+    "@bazel/terser": "^2.3.0",
+    "@bazel/typescript": "^2.3.0",
+    "@rollup/plugin-commonjs": "^16.0.0",
+    "@rollup/plugin-node-resolve": "^10.0.0",
     "@types/d3": "5.7.2",
     "@types/jasmine": "^3.5.10",
     "@types/lodash": "^4.14.158",
@@ -51,30 +50,30 @@
     "jasmine-core": "^3.5.0",
     "karma": "5.0.2",
     "karma-chrome-launcher": "^3.1.0",
-    "karma-firefox-launcher": "^1.3.0",
-    "karma-jasmine": "^3.1.0",
+    "karma-firefox-launcher": "^2.1.0",
+    "karma-jasmine": "^4.0.1",
     "karma-requirejs": "^1.1.0",
-    "karma-sourcemap-loader": "^0.3.7",
+    "karma-sourcemap-loader": "^0.3.8",
     "prettier": "2.1.1",
     "requirejs": "^2.3.6",
-    "rollup": "^2.26.4",
-    "terser": "^4.6.3",
-    "tslib": "^1.10.0",
-    "typescript": "3.8.3"
+    "rollup": "^2.33.1",
+    "terser": "^5.3.8",
+    "tslib": "^2.0.1",
+    "typescript": "4.0.5"
   },
   "dependencies": {
-    "@angular/animations": "^9.0.0",
-    "@angular/cdk": "^9.0.0",
-    "@angular/common": "^9.0.0",
-    "@angular/core": "^9.0.0",
-    "@angular/forms": "^9.0.0",
-    "@angular/localize": "^9.1.7",
-    "@angular/material": "^9.0.0",
-    "@angular/platform-browser": "^9.0.0",
-    "@angular/platform-browser-dynamic": "^9.0.0",
-    "@angular/router": "^9.0.0",
-    "@ngrx/effects": "^9.0.0",
-    "@ngrx/store": "^9.0.0",
+    "@angular/animations": "^10.1.2",
+    "@angular/cdk": "^10.2.1",
+    "@angular/common": "^10.1.2",
+    "@angular/core": "^10.1.2",
+    "@angular/forms": "^10.1.2",
+    "@angular/localize": "^10.1.2",
+    "@angular/material": "^10.2.1",
+    "@angular/platform-browser": "^10.1.2",
+    "@angular/platform-browser-dynamic": "^10.1.2",
+    "@angular/router": "^10.1.2",
+    "@ngrx/effects": "^9.2.0",
+    "@ngrx/store": "^9.2.0",
     "@polymer/decorators": "^3.0.0",
     "@polymer/iron-behaviors": "^3.0.1",
     "@polymer/iron-collapse": "^3.0.1",
@@ -115,7 +114,7 @@
     "lodash": "^4.17.19",
     "monaco-editor-core": "^0.20.0",
     "monaco-languages": "^1.10.0",
-    "ngx-color-picker": "^9.0.0",
+    "ngx-color-picker": "^10.1.0",
     "numeric": "^1.2.6",
     "plottable": "^3.9.0",
     "rxjs": "7.0.0-beta.0",

tensorboard/defs/BUILD

@@ -1,4 +1,5 @@
 load("//tensorboard/defs:protos.bzl", "tb_proto_library")
+load("@build_bazel_rules_nodejs//:index.bzl", "nodejs_binary")
 
 package(default_visibility = ["//tensorboard:internal"])
 
@@ -36,3 +37,17 @@ tb_proto_library(
 exports_files(["web_test_python_stub.template.py"])
 
 exports_files(["rollup_config.js"])
+
+# Custom ts_library compiler that runs tsc_wrapped with angular/compiler-cli statically linked
+# This can be used with worker mode because we don't need the linker at runtime to make
+# the angular plugin loadable
+# Just a clone of @npm//@bazel/typescript/bin:tsc_wrapped with added deps
+nodejs_binary(
+    name = "tsc_wrapped_with_angular",
+    data = [
+        "@npm//@angular/compiler-cli",
+        "@npm//@bazel/typescript",
+    ],
+    entry_point = "@npm//:node_modules/@bazel/typescript/internal/tsc_wrapped/tsc_wrapped.js",
+    visibility = ["//tensorboard:__subpackages__"],
+)

tensorboard/defs/defs.bzl

@@ -13,10 +13,9 @@
 # limitations under the License.
 """External-only delegates for various BUILD rules."""
 
-load("@npm_angular_bazel//:index.bzl", "ng_module")
-load("@npm_bazel_rollup//:index.bzl", "rollup_bundle")
-load("@npm_bazel_karma//:index.bzl", "karma_web_test_suite")
-load("@npm_bazel_typescript//:index.bzl", "ts_config", "ts_devserver", "ts_library")
+load("@npm//@bazel/rollup:index.bzl", "rollup_bundle")
+load("@npm//@bazel/karma:index.bzl", "karma_web_test_suite")
+load("@npm//@bazel/typescript:index.bzl", "ts_config", "ts_devserver", "ts_library")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary", "sass_library")
 
 def tensorboard_webcomponent_library(**kwargs):
@@ -67,7 +66,7 @@ def tf_ts_library(strict_checks = True, **kwargs):
         tsconfig = "//:tsconfig-test"
     kwargs.setdefault("deps", []).append("@npm//tslib")
 
-    ts_library(tsconfig = tsconfig, **kwargs)
+    ts_library(tsconfig = tsconfig, supports_workers = True, **kwargs)
 
 def tf_ts_devserver(**kwargs):
     """TensorBoard wrapper for the rule for a TypeScript dev server."""
@@ -141,6 +140,12 @@ def tf_sass_library(**kwargs):
         **kwargs
     )
 
-def tf_ng_module(**kwargs):
+def tf_ng_module(assets = [], **kwargs):
     """TensorBoard wrapper for Angular modules."""
-    ng_module(**kwargs)
+    ts_library(
+        compiler = "//tensorboard/defs:tsc_wrapped_with_angular",
+        supports_workers = True,
+        use_angular_plugin = True,
+        angular_assets = assets,
+        **kwargs
+    )

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/effects/debugger_effects.ts

@@ -111,8 +111,7 @@ import {
 } from '../data_source/tfdbg2_data_source';
 
 /** @typehack */ import * as _typeHackRxjs from 'rxjs';
-/** @typehack */ import * as _typeHackNgrxStore from '@ngrx/store/src/models';
-/** @typehack */ import * as _typeHackNgrxEffects from '@ngrx/effects/effects';
+/** @typehack */ import * as _typeHackNgrxEffects from '@ngrx/effects';
 
 // Minimum polling interval in milliseconds.
 export const MIN_POLLING_INTERVAL_MS = 2e3;

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/store/debugger_reducers.ts

@@ -45,7 +45,7 @@ import {
 
 // HACK: These imports are for type inference.
 // https://github.com/bazelbuild/rules_nodejs/issues/1013
-/** @typehack */ import * as _typeHackStore from '@ngrx/store/store';
+/** @typehack */ import * as _typeHackStore from '@ngrx/store';
 
 const DEFAULT_EXECUTION_PAGE_SIZE = 100;
 const DEFAULT_GRAPH_EXECUTION_PAGE_SIZE = 200;

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/store/debugger_selectors.ts

@@ -49,8 +49,7 @@ import {
 
 // HACK: These imports are for type inference.
 // https://github.com/bazelbuild/rules_nodejs/issues/1013
-/** @typehack */ import * as _typeHackSelector from '@ngrx/store/src/selector';
-/** @typehack */ import * as _typeHackStore from '@ngrx/store/store';
+/** @typehack */ import * as _typeHackStore from '@ngrx/store';
 
 const selectDebuggerState = createFeatureSelector<State, DebuggerState>(
   DEBUGGER_FEATURE_KEY

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/alerts/BUILD

@@ -19,6 +19,7 @@ tf_ng_module(
         "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/actions",
         "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/store",
         "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/store:types",
+        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@ngrx/store",
         "@npm//rxjs",

tensorboard/webapp/alert/effects/index.ts

@@ -20,7 +20,7 @@ import {State} from '../../app_state';
 import {alertReported} from '../actions';
 import {AlertActionModule} from '../alert_action_module';
 
-/** @typehack */ import * as _typeHackNgrxEffects from '@ngrx/effects/effects';
+/** @typehack */ import * as _typeHackNgrxEffects from '@ngrx/effects';
 /** @typehack */ import * as _typeHackStore from '@ngrx/store';
 /** @typehack */ import * as _typeHackRxjs from 'rxjs';
 

tensorboard/webapp/alert/store/alert_reducers.ts

@@ -16,7 +16,7 @@ import {Action, createReducer, on} from '@ngrx/store';
 import * as actions from '../actions';
 import {AlertState} from './alert_types';
 
-/** @typehack */ import * as _typeHackStore from '@ngrx/store/store';
+/** @typehack */ import * as _typeHackStore from '@ngrx/store';
 
 const initialState: AlertState = {
   latestAlert: null,

tensorboard/webapp/alert/store/alert_selectors.ts

@@ -16,8 +16,7 @@ import {createSelector, createFeatureSelector} from '@ngrx/store';
 import {AlertInfo} from '../types';
 import {AlertState, State, ALERT_FEATURE_KEY} from './alert_types';
 
-/** @typehack */ import * as _typeHackSelector from '@ngrx/store/src/selector';
-/** @typehack */ import * as _typeHackStore from '@ngrx/store/store';
+/** @typehack */ import * as _typeHackStore from '@ngrx/store';
 
 const selectAlertState = createFeatureSelector<State, AlertState>(
   ALERT_FEATURE_KEY

tensorboard/webapp/angular/BUILD

@@ -35,7 +35,7 @@ tf_ts_library(
     name = "expect_angular_cdk_clipboard",
     srcs = [],
     deps = [
-        "@npm//@angular/material",
+        "@npm//@angular/cdk",
     ],
 )
 

tensorboard/webapp/app_container.ts

@@ -17,8 +17,6 @@ import {Store} from '@ngrx/store';
 import {coreLoaded} from './core/actions';
 import {State} from './core/store';
 
-/** @typehack */ import * as _typeHackRxjs from 'rxjs';
-
 @Component({
   selector: 'tb-webapp',
   templateUrl: './app_container.ng.html',

tensorboard/webapp/app_routing/BUILD

@@ -144,6 +144,7 @@ tf_ng_module(
         ":types",
         "//tensorboard/webapp/app_routing/actions",
         "@npm//@angular/core",
+        "@npm//@ngrx/store",
         "@npm//rxjs",
     ],
 )

tensorboard/webapp/app_routing/effects/app_routing_effects.ts

@@ -41,7 +41,7 @@ import {RouteRegistryModule} from '../route_registry_module';
 import {getActiveRoute} from '../store/app_routing_selectors';
 import {Navigation, Route} from '../types';
 
-/** @typehack */ import * as _typeHackNgrxEffects from '@ngrx/effects/effects';
+/** @typehack */ import * as _typeHackNgrxEffects from '@ngrx/effects';
 /** @typehack */ import * as _typeHackModels from '@ngrx/store/src/models';
 /** @typehack */ import * as _typeHackStore from '@ngrx/store';
 

tensorboard/webapp/core/effects/core_effects.ts

@@ -47,7 +47,6 @@ import {getEnabledExperimentalPlugins} from '../../feature_flag/store/feature_fl
 import {State} from '../../app_state';
 
 /** @typehack */ import * as _typeHackRxjs from 'rxjs';
-/** @typehack */ import * as _typeHackNgrx from '@ngrx/store/src/models';
 /** @typehack */ import * as _typeHackNgrxEffects from '@ngrx/effects';
 
 @Injectable()

tensorboard/webapp/core/store/core_reducers.ts

@@ -17,10 +17,6 @@ import {DataLoadState} from '../../types/data';
 import * as actions from '../actions';
 import {CoreState, initialState} from './core_types';
 
-// HACK: These imports are for type inference.
-// https://github.com/bazelbuild/rules_nodejs/issues/1013
-/** @typehack */ import * as _typeHackStore from '@ngrx/store/store';
-
 const reducer = createReducer(
   initialState,
   on(

tensorboard/webapp/core/store/core_selectors.ts

@@ -26,7 +26,6 @@ import {Run, RunId} from '../types';
 // HACK: These imports are for type inference.
 // https://github.com/bazelbuild/rules_nodejs/issues/1013
 /** @typehack */ import * as _typeHackSelector from '@ngrx/store/src/selector';
-/** @typehack */ import * as _typeHackStore from '@ngrx/store/store';
 
 const selectCoreState = createFeatureSelector<State, CoreState>(
   CORE_FEATURE_KEY

tensorboard/webapp/core/views/BUILD

@@ -16,6 +16,7 @@ tf_ng_module(
         "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@ngrx/store",
+        "@npm//rxjs",
     ],
 )