Webapp Angular upgrade 15 to 16

package.json

@@ -30,9 +30,9 @@
   "devDependencies": {
     "@angular-devkit/build-angular": "^15.2.9",
     "@angular/build-tooling": "https://github.com/angular/dev-infra-private-build-tooling-builds.git#fb42478534df7d48ec23a6834fea94a776cb89a0",
-    "@angular/cli": "^15.2.9",
-    "@angular/compiler": "15.2.9",
-    "@angular/compiler-cli": "^15.2.9",
+    "@angular/cli": "^16.2.0",
+    "@angular/compiler": "16.2.12",
+    "@angular/compiler-cli": "^16.2.12",
     "@babel/core": "^7.16.12",
     "@bazel/concatjs": "5.7.0",
     "@bazel/esbuild": "5.7.0",
@@ -65,16 +65,16 @@
     "yarn-deduplicate": "^5.0.0"
   },
   "dependencies": {
-    "@angular/animations": "^15.2.9",
-    "@angular/cdk": "^15.2.9",
-    "@angular/common": "15.2.9",
-    "@angular/core": "^15.2.9",
-    "@angular/forms": "^15.2.9",
-    "@angular/localize": "^15.2.9",
-    "@angular/material": "^15.2.9",
-    "@angular/platform-browser": "^15.2.9",
-    "@angular/platform-browser-dynamic": "^15.2.9",
-    "@angular/router": "^15.2.9",
+    "@angular/animations": "^16.2.12",
+    "@angular/cdk": "^16.2.14",
+    "@angular/common": "16.2.12",
+    "@angular/core": "^16.2.12",
+    "@angular/forms": "^16.2.12",
+    "@angular/localize": "^16.2.12",
+    "@angular/material": "^16.2.14",
+    "@angular/platform-browser": "^16.2.12",
+    "@angular/platform-browser-dynamic": "^16.2.12",
+    "@angular/router": "^16.2.12",
     "@ngrx/effects": "^15.4.0",
     "@ngrx/store": "^15.4.0",
     "@polymer/decorators": "^3.0.0",
@@ -131,6 +131,15 @@
     "three": "~0.137.0",
     "umap-js": "^1.3.2",
     "web-animations-js": "^2.3.2",
-    "zone.js": "^0.12.0"
-  }
+    "zone.js": "^0.13.3"
+  },
+  "resolutions": {
+    "@types/d3-brush": "1.1.8",
+    "@types/d3-axis": "1.0.19",
+    "@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"
+  },
+  "packageManager": "yarn@1.22.22"
 }

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

@@ -1,3 +1,15 @@
+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 d5a8645..4b57378 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 57cd2b9..2e5eaf1 100755
 --- a/node_modules/@angular/build-tooling/shared-scripts/angular-optimization/esbuild-plugin.mjs

patches/@bazel+concatjs+5.7.0.patch

@@ -1,3 +1,33 @@
+diff --git a/node_modules/@bazel/concatjs/internal/common/compilation.bzl b/node_modules/@bazel/concatjs/internal/common/compilation.bzl
+index fed787a..377915a 100755
+--- a/node_modules/@bazel/concatjs/internal/common/compilation.bzl
++++ b/node_modules/@bazel/concatjs/internal/common/compilation.bzl
+@@ -160,25 +160,11 @@ def _outputs(ctx, label, srcs_files = []):
+         closure_js_file = ctx.actions.declare_file(basename + ".mjs")
+         closure_js_files.append(closure_js_file)
+
+-        # Temporary until all imports of ngfactory/ngsummary files are removed
+-        # TODO(alexeagle): clean up after Ivy launch
+-        if getattr(ctx.attr, "use_angular_plugin", False):
+-            closure_js_files.append(ctx.actions.declare_file(basename + ".ngfactory.mjs"))
+-            closure_js_files.append(ctx.actions.declare_file(basename + ".ngsummary.mjs"))
+-
+         if not is_dts:
+             devmode_js_file = ctx.actions.declare_file(basename + ".js")
+             devmode_js_files.append(devmode_js_file)
+             transpilation_infos.append(struct(closure = closure_js_file, devmode = devmode_js_file))
+             declaration_files.append(ctx.actions.declare_file(basename + ".d.ts"))
+-
+-            # Temporary until all imports of ngfactory/ngsummary files are removed
+-            # TODO(alexeagle): clean up after Ivy launch
+-            if getattr(ctx.attr, "use_angular_plugin", False):
+-                devmode_js_files.append(ctx.actions.declare_file(basename + ".ngfactory.js"))
+-                devmode_js_files.append(ctx.actions.declare_file(basename + ".ngsummary.js"))
+-                declaration_files.append(ctx.actions.declare_file(basename + ".ngfactory.d.ts"))
+-                declaration_files.append(ctx.actions.declare_file(basename + ".ngsummary.d.ts"))
+     return struct(
+         closure_js = closure_js_files,
+         devmode_js = devmode_js_files,
 diff --git a/node_modules/@bazel/concatjs/web_test/karma.conf.js b/node_modules/@bazel/concatjs/web_test/karma.conf.js
 index 90a03ef..28778c9 100755
 --- a/node_modules/@bazel/concatjs/web_test/karma.conf.js

patches/README.md

@@ -3,6 +3,10 @@
 We use [patch-package](https://www.npmjs.com/package/patch-package) to apply
 TensorBoard-specific patches to some of our npm/yarn dependencies.
 
+After creating or updating a patch, ensure there is no trailing whitespace on
+any line (CI runs `./tensorboard/tools/whitespace_hygiene_test.py`). You can
+strip it with `sed -i '' 's/[[:space:]]*$//' patches/<patch-file>.patch`.
+
 To regenerate @bazel/concatjs patch:
 * `vi node_modules/@bazel/concatjs/web_test/karma.conf.js`
 * make edits

tensorboard/defs/defs.bzl

@@ -224,8 +224,8 @@ def tf_ng_web_test_suite(name, deps = [], **kwargs):
         name = name,
         bootstrap =
             [
-                "@npm//:node_modules/zone.js/dist/zone-evergreen.js",
-                "@npm//:node_modules/zone.js/dist/zone-testing.js",
+                "@npm//:node_modules/zone.js/bundles/zone.umd.js",
+                "@npm//:node_modules/zone.js/bundles/zone-testing.umd.js",
                 "@npm//:node_modules/reflect-metadata/Reflect.js",
             ],
         # The only dependency is the esbuild bundle from spec_bundle().

tensorboard/plugins/mesh/tf_mesh_dashboard/mesh-viewer.ts

@@ -18,7 +18,7 @@ limitations under the License.
  */
 
 import * as THREE from 'three';
-import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
+import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
 
 interface LayerConfig {
   showBoundingBox?: boolean;

tensorboard/plugins/projector/vz_projector/scatterPlot.ts

@@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import * as THREE from 'three';
-import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
+import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
 import {ProjectorEventContext} from './projectorEventContext';
 import {CameraType, LabelRenderParams, RenderContext} from './renderContext';
 import {

tensorboard/webapp/app_routing/views/router_outlet_component.ts

@@ -15,10 +15,10 @@ limitations under the License.
 import {
   ChangeDetectionStrategy,
   Component,
-  ComponentFactoryResolver,
   Input,
   OnChanges,
   SimpleChanges,
+  Type,
   ViewChild,
   ViewContainerRef,
 } from '@angular/core';
@@ -33,22 +33,16 @@ export class RouterOutletComponent implements OnChanges {
   @ViewChild('routeContainer', {static: true, read: ViewContainerRef})
   private readonly routeContainer!: ViewContainerRef;
 
-  @Input() activeNgComponent!: unknown | null;
-
-  constructor(
-    private readonly componentFactoryResolver: ComponentFactoryResolver
-  ) {}
+  @Input() activeNgComponent!: Type<Component> | null;
 
   ngOnChanges(changes: SimpleChanges) {
     const activeComponentChange = changes['activeNgComponent'];
     if (activeComponentChange) {
       this.routeContainer.clear();
-      if (activeComponentChange.currentValue) {
-        const componentFactory =
-          this.componentFactoryResolver.resolveComponentFactory(
-            activeComponentChange.currentValue
-          );
-        this.routeContainer.createComponent(componentFactory);
+      const componentType =
+        activeComponentChange.currentValue as Type<Component> | null;
+      if (componentType) {
+        this.routeContainer.createComponent(componentType);
       }
     }
   }

tensorboard/webapp/bootstrap.ts

@@ -17,7 +17,7 @@ limitations under the License.
 // https://angular.io/guide/migration-localize
 import '@angular/localize/init';
 import {platformBrowser} from '@angular/platform-browser';
-import 'zone.js/dist/zone.js'; // Angular runtime dep
+import 'zone.js'; // Angular runtime dep
 import {AppModule} from './app_module';
 
 // Bootstrap needs to happen after body is ready but we cannot reliably

tensorboard/webapp/customization/customizable_component.ts

@@ -12,14 +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.
 ==============================================================================*/
-import {
-  Component,
-  ComponentFactoryResolver,
-  Input,
-  OnInit,
-  Type,
-  ViewContainerRef,
-} from '@angular/core';
+import {Component, Input, OnInit, Type, ViewContainerRef} from '@angular/core';
 
 /**
  * A Component that defines a customization point. Ideal for use for small
@@ -70,7 +63,7 @@ import {
  *      declarations: [MyCustomButtonComponent],
  *      providers: [{
  *        provide: CustomizableButton,
- *        useClass: MyCustomButtonComponent,
+ *        useValue: MyCustomButtonComponent,
  *      }]
  *    })
  */
@@ -86,18 +79,11 @@ import {
 export class CustomizableComponent implements OnInit {
   @Input() customizableComponent!: Type<Component> | undefined;
 
-  constructor(
-    private readonly viewContainerRef: ViewContainerRef,
-    private readonly componentFactoryResolver: ComponentFactoryResolver
-  ) {}
+  constructor(private readonly viewContainerRef: ViewContainerRef) {}
 
   ngOnInit() {
     if (this.customizableComponent) {
-      const componentFactory =
-        this.componentFactoryResolver.resolveComponentFactory(
-          this.customizableComponent.constructor as Type<unknown>
-        );
-      this.viewContainerRef.createComponent(componentFactory);
+      this.viewContainerRef.createComponent(this.customizableComponent);
     }
   }
 }

tensorboard/webapp/customization/customization_test.ts

@@ -69,7 +69,7 @@ export class CustomizableComponent {}
   providers: [
     {
       provide: CustomizableComponentType,
-      useClass: CustomizableComponent,
+      useValue: CustomizableComponent,
     },
   ],
 })

tensorboard/webapp/metrics/views/main_view/main_view_test.ts

@@ -1776,7 +1776,7 @@ describe('customizable share button ', () => {
       providers: [
         {
           provide: SHARE_BUTTON_COMPONENT,
-          useClass: TestShareButtonContainer,
+          useValue: TestShareButtonContainer,
         },
         provideMockStore({
           initialState: appStateFromMetricsState(buildMetricsState()),

tensorboard/webapp/plugins/plugins_component.ts

@@ -21,7 +21,6 @@ limitations under the License.
 import {
   ChangeDetectionStrategy,
   Component,
-  ComponentFactoryResolver,
   ElementRef,
   Input,
   OnChanges,
@@ -64,7 +63,6 @@ export enum PluginLoadState {
 })
 export class PluginsComponent implements OnChanges {
   constructor(
-    private readonly componentFactoryResolver: ComponentFactoryResolver,
     private readonly pluginRegistry: PluginRegistryModule,
     @Optional() private readonly pluginApiHost: PluginApiHostModule
   ) {}
@@ -230,12 +228,8 @@ export class PluginsComponent implements OnChanges {
       case LoadingMechanismType.NG_COMPONENT:
         const ngComponentClass = this.pluginRegistry.getComponent(plugin.id);
         if (ngComponentClass) {
-          const componentFactory =
-            this.componentFactoryResolver.resolveComponentFactory(
-              ngComponentClass
-            );
           const pluginComponent =
-            this.ngPluginContainer.createComponent(componentFactory);
+            this.ngPluginContainer.createComponent(ngComponentClass);
           pluginElement = pluginComponent.location.nativeElement;
         } else {
           console.error(

tensorboard/webapp/reloader/reloader_component_test.ts

@@ -36,6 +36,7 @@ describe('reloader_component', () => {
       removeEventListener: document.removeEventListener.bind(document),
       // DOMTestComponentRenderer injects DOCUMENT and requires the following
       // properties to function.
+      querySelector: document.querySelector.bind(document),
       querySelectorAll: document.querySelectorAll.bind(document),
       body: document.body,
     };