chore: Upgrade Angular (to 13) and related dependencies (#6063)

Upgrade Angular to version 13 and related dependencies appropriately.

See: https://update.angular.io/?l=3&v=12.0-13.0
See:
https://medium.com/ngrx/announcing-ngrx-version-13-ivy-builds-feature-creators-improved-selectors-and-more-6a1a4c52c824

Highlights:

* Upgrade the following set of dependencies:
  * `@angular/*`: 13.3.X
  * `@ngrx/*`: 13.2.X
  * `rxjs`: 7.4.X
  * `zone.js` 0.11.6 or higher
  * `ngx-color-picker`: 12.0.1

* Some build tooling was previously upgraded in preparation for this
change:
  * #6036
  * #6049

* Some tests were previously cleaned up in preparation for this change:
  * #6056 

* No longer need ngcc as a post install step. All Angular-related
dependencies come with partially-compiled binaries.

* The tensorboard:dev Angular binary now includes the runtime JIT
compiler and no longer relies on AOT compilation. Googlers, see
http://go/tb-oss-bundling for justification.

* We can get rid of some of the patches to Angular build tooling that we
needed while we used an old version of @angular/compiler-cli.

* Impact on binaries and performance:
  * There isn't much impact on production binary sizes. The
'//tensorboard' tb_webapp_binary.js shrinks slightly from 2,574,467
bytes to 2,559,890 bytes.
  * The '//tensorboard:dev' tb_webapp_binary.js grows an entire 1MB, from
6,074,186 bytes to 7,005,529, likely because it now includes the Angular
compiler. It now relies on JIT compilation but there does not seem to be
noticeable impact on runtime performance. The development experience is
still relatively smooth.

Author: bmd3k

.bazelrc

@@ -1,7 +1,3 @@
-# Use the Angular Ivy compiler
-# See https://github.com/angular/angular/blob/master/docs/BAZEL.md#various-flags-used-for-tests
-build --define=angular_ivy_enabled=True
-
 common --experimental_repo_remote_exec  # from TensorFlow
 
 # Use C++ backing implementations for Python proto parsing and deserialization,

package.json

@@ -7,7 +7,7 @@
     "doc": "docs"
   },
   "scripts": {
-    "postinstall": "ngcc && patch-package",
+    "postinstall": "patch-package",
     "build": "bazel build //...",
     "test": "ibazel test //...",
     "lint": "prettier --check 'tensorboard/**/*.'{css,html,js,ts,scss} .github/**/*.yml",
@@ -30,9 +30,9 @@
   "devDependencies": {
     "@angular-devkit/build-angular": "14.0.0-next.3",
     "@angular/build-tooling": "https://github.com/angular/dev-infra-private-build-tooling-builds.git#fb42478534df7d48ec23a6834fea94a776cb89a0",
-    "@angular/cli": "^12.2.0",
-    "@angular/compiler": "^12.2.0",
-    "@angular/compiler-cli": "^12.2.0",
+    "@angular/cli": "^13.3.0",
+    "@angular/compiler": "^13.3.0",
+    "@angular/compiler-cli": "^13.3.0",
     "@babel/core": "^7.16.12",
     "@bazel/concatjs": "5.7.0",
     "@bazel/esbuild": "5.7.0",
@@ -65,18 +65,18 @@
     "yarn-deduplicate": "^5.0.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": "^13.3.0",
+    "@angular/cdk": "^13.3.0",
+    "@angular/common": "^13.3.0",
+    "@angular/core": "^13.3.0",
+    "@angular/forms": "^13.3.0",
+    "@angular/localize": "^13.3.0",
+    "@angular/material": "^13.3.0",
+    "@angular/platform-browser": "^13.3.0",
+    "@angular/platform-browser-dynamic": "^13.3.0",
+    "@angular/router": "^13.3.0",
+    "@ngrx/effects": "^13.2.0",
+    "@ngrx/store": "^13.2.0",
     "@polymer/decorators": "^3.0.0",
     "@polymer/iron-behaviors": "^3.0.1",
     "@polymer/iron-collapse": "^3.0.1",
@@ -123,14 +123,14 @@
     "marked": "^4.0.10",
     "monaco-editor-core": "^0.26.0",
     "monaco-languages": "^2.6.0",
-    "ngx-color-picker": "^11.0.0",
+    "ngx-color-picker": "12.0.1",
     "numeric": "^1.2.6",
     "plottable": "^3.9.0",
     "postinstall-postinstall": "^2.1.0",
-    "rxjs": "^7.3.0",
+    "rxjs": "^7.4.0",
     "three": "~0.137.0",
     "umap-js": "^1.3.2",
     "web-animations-js": "^2.3.2",
-    "zone.js": "^0.11.4"
+    "zone.js": "^0.11.6"
   }
 }

patches/@angular+build-tooling+0.0.0-7d103b83a07f132629592fc9918ce17d42a5e382.patch

@@ -1,29 +1,3 @@
-diff --git a/node_modules/@angular/build-tooling/bazel/app-bundling/esbuild.config-tmpl.mjs b/node_modules/@angular/build-tooling/bazel/app-bundling/esbuild.config-tmpl.mjs
-index 618bbc5..05a112f 100755
---- a/node_modules/@angular/build-tooling/bazel/app-bundling/esbuild.config-tmpl.mjs
-+++ b/node_modules/@angular/build-tooling/bazel/app-bundling/esbuild.config-tmpl.mjs
-@@ -9,9 +9,18 @@
- import * as path from 'path';
-
- import {createEsbuildAngularOptimizePlugin} from '@angular/build-tooling/shared-scripts/angular-optimization/esbuild-plugin.mjs';
--import {createEs2015LinkerPlugin} from '@angular/compiler-cli/linker/babel';
--import {ConsoleLogger, NodeJSFileSystem, LogLevel} from '@angular/compiler-cli';
--import {GLOBAL_DEFS_FOR_TERSER_WITH_AOT} from '@angular/compiler-cli/private/tooling';
-+// For TensorBoard: Patch the esbuild config template so that imports are
-+// grabbed from the correct places. This is just the consequence of some
-+// skew using pre-13.X @angular/compiler-cli binaries. This should be resolved
-+// once we upgrade to Angular 13+.
-+//import {createEs2015LinkerPlugin} from '@angular/compiler-cli/linker/babel';
-+import {createEs2015LinkerPlugin} from '@angular/compiler-cli/linker/babel/index.js';
-+//import {ConsoleLogger, NodeJSFileSystem, LogLevel} from '@angular/compiler-cli';
-+import {NodeJSFileSystem} from '@angular/compiler-cli/src/ngtsc/file_system/src/node_js_file_system.js';
-+import {LogLevel} from '@angular/compiler-cli/src/ngtsc/logging/index.js';
-+import {ConsoleLogger} from '@angular/compiler-cli/src/ngtsc/logging/src/console_logger.js';
-+//import {GLOBAL_DEFS_FOR_TERSER_WITH_AOT} from '@angular/compiler-cli/private/tooling';
-+import {GLOBAL_DEFS_FOR_TERSER_WITH_AOT} from '@angular/compiler-cli/src/tooling.js';
-
- /** Root path pointing to the app bundle source entry-point file. */
- const entryPointSourceRootPath = path.normalize(`TMPL_ENTRY_POINT_ROOTPATH`);
 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 57cd2b9..2e5eaf1 100755
 --- a/node_modules/@angular/build-tooling/shared-scripts/angular-optimization/esbuild-plugin.mjs

tensorboard/webapp/dev_assets/BUILD

@@ -20,6 +20,7 @@ tf_ng_module(
     ],
     deps = [
         "//tensorboard/webapp:ng_main",
+        "@npm//@angular/compiler",
         "@npm//@angular/localize",
     ],
 )

tensorboard/webapp/dev_assets/main_dev.ts

@@ -12,4 +12,5 @@ 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.
 ==============================================================================*/
+import '@angular/compiler';
 import '../bootstrap';