Bump angular to v19 (#1155)

mesop/tests/e2e/focus_component_test.ts

@@ -51,7 +51,7 @@ test('focus select', async ({page}) => {
   await page.goto('/focus_component');
   await page.locator('//mat-select[@id="mat-select-0"]').click();
   await page.getByRole('option', {name: 'Select'}).click();
-  await expectIsFocused(page, 'mat-select[id="mat-select-2"]');
+  await expectIsFocused(page, 'mat-select[id="mat-select-1"]');
 });
 
 test('focus slider', async ({page}) => {

mesop/web/src/app/styles.scss

@@ -139,6 +139,11 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
 
 $primary: $_primary;
 $tertiary: $_tertiary;
+// Use "sys" instead of "mat-sys" because
+// "sys" used to be the default and is still used
+// in downstream angular.
+// https://github.com/angular/components/pull/29908
+$system_variables_prefix: sys;
 
 @function create-theme($density: 0) {
   @return mat.define-theme(
@@ -148,6 +153,7 @@ $tertiary: $_tertiary;
         primary: $_primary,
         tertiary: $_tertiary,
         use-system-variables: true,
+        system-variables-prefix: $system_variables_prefix,
       ),
       density: (
         scale: $density,
@@ -164,6 +170,7 @@ $dark-theme: mat.define-theme(
       primary: $_primary,
       tertiary: $_tertiary,
       use-system-variables: true,
+      system-variables-prefix: $system_variables_prefix,
     ),
   )
 );

mesop/web/src/component_renderer/component_renderer.ts

@@ -17,7 +17,6 @@ import {
   UserEvent,
   WebComponentType,
 } from 'mesop/mesop/protos/ui_jspb_proto_pb/mesop/protos/ui_pb';
-import {ComponentLoader} from './component_loader';
 import {BoxType} from 'mesop/mesop/components/box/box_jspb_proto_pb/mesop/components/box/box_pb';
 import {
   BaseComponent,
@@ -39,7 +38,7 @@ const WEB_COMPONENT_PREFIX = '<web>';
   templateUrl: 'component_renderer.ng.html',
   styleUrl: 'component_renderer.css',
   standalone: true,
-  imports: [CommonModule, ComponentLoader],
+  imports: [CommonModule],
 })
 export class ComponentRenderer {
   @ViewChild('childrenTemplate', {static: true})

mesop/web/src/editor/editor.ts

@@ -53,7 +53,7 @@ const routes: Routes = [{path: '**', component: Editor}];
 @Component({
   selector: 'mesop-editor-app',
   template: '<router-outlet></router-outlet>',
-  imports: [Editor, RouterOutlet],
+  imports: [RouterOutlet],
   standalone: true,
 })
 class MesopEditorApp {}

mesop/web/src/error/error_box.ts

@@ -6,7 +6,6 @@ import {
 } from 'mesop/mesop/protos/ui_jspb_proto_pb/mesop/protos/ui_pb';
 
 import {CommonModule} from '@angular/common';
-import {ComponentRenderer} from '../component_renderer/component_renderer';
 import {Channel} from '../services/channel';
 import {marked} from '../../external/marked';
 import {MatIconModule} from '@angular/material/icon';
@@ -20,7 +19,6 @@ import {MatButtonModule} from '@angular/material/button';
   standalone: true,
   imports: [
     CommonModule,
-    ComponentRenderer,
     MatProgressBarModule,
     MatIconModule,
     MatDialogModule,

mesop/web/src/shell/shell.ts

@@ -28,7 +28,7 @@ import {provideAnimations} from '@angular/platform-browser/animations';
 import {bootstrapApplication} from '@angular/platform-browser';
 import {MatIconModule, MatIconRegistry} from '@angular/material/icon';
 import {MatSidenavModule} from '@angular/material/sidenav';
-import {ErrorBox, ServerErrorBoxDialogComponent} from '../error/error_box';
+import {ServerErrorBoxDialogComponent} from '../error/error_box';
 import {GlobalErrorHandlerService} from '../services/global_error_handler';
 import {getViewportSize} from '../utils/viewport_size';
 import {createCustomElement} from '@angular/elements';
@@ -54,7 +54,6 @@ import {MatDialog} from '@angular/material/dialog';
     MatProgressBarModule,
     MatIconModule,
     MatSidenavModule,
-    ErrorBox,
   ],
   providers: [{provide: ErrorHandler, useClass: GlobalErrorHandlerService}],
   styleUrl: 'shell.css',
@@ -265,7 +264,7 @@ const routes: Routes = [{path: '**', component: Shell}];
 @Component({
   selector: 'mesop-app',
   template: '<router-outlet></router-outlet>',
-  imports: [Shell, RouterOutlet],
+  imports: [RouterOutlet],
   standalone: true,
 })
 class MesopApp {}

package.json

@@ -46,18 +46,18 @@
     "ci-docs-monitor-test": "ts-node --esm --project scripts/tsconfig.json scripts/docs-deploy/monitoring/ci-test.mts",
     "ci-notify-slack-failure": "ts-node --esm --project scripts/tsconfig.json scripts/circleci/notify-slack-job-failure.mts"
   },
-  "version": "^18.0.0",
+  "version": "^19.0.0",
   "dependencies": {
-    "@angular/animations": "^18.0.0",
-    "@angular/cdk": "^18.0.0",
-    "@angular/common": "^18.0.0",
-    "@angular/compiler": "^18.0.0",
-    "@angular/core": "^18.0.0",
+    "@angular/animations": "^19.0.0",
+    "@angular/cdk": "^19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/core": "^19.0.0",
     "@angular/elements": "^18.0.3",
-    "@angular/forms": "^18.0.0",
-    "@angular/material": "^18.0.0",
-    "@angular/material-experimental": "^18.0.0",
-    "@angular/platform-browser": "^18.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/material": "^19.0.0",
+    "@angular/material-experimental": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
     "@codemirror/lang-python": "^6.1.6",
     "@codemirror/merge": "^6.7.0",
     "@codemirror/theme-one-dark": "^6.1.2",
@@ -71,18 +71,19 @@
     "zone.js": "~0.14.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "18.0.0",
-    "@angular-devkit/core": "^18.0.0",
-    "@angular-devkit/schematics": "^18.0.0",
-    "@angular/bazel": "https://github.com/angular/bazel-builds.git#bac9c1abe1e6ac1801fbbccb53353a1ed7126469",
-    "@angular/build-tooling": "https://github.com/angular/dev-infra-private-build-tooling-builds.git#a11e93b01708684827af3873e9232b437c209237",
-    "@angular/cli": "^18.0.0",
-    "@angular/compiler-cli": "^18.0.0",
-    "@angular/localize": "^18.0.0",
+    "@angular-devkit/build-angular": "19.0.0",
+    "@angular-devkit/core": "^19.0.0",
+    "@angular-devkit/schematics": "^19.0.0",
+    "@angular/bazel": "https://github.com/angular/bazel-builds.git#d9a8ea4f9e62cb475eff89519426a38631b2704d",
+    "@angular/build-tooling": "https://github.com/angular/dev-infra-private-build-tooling-builds.git#74e0e7b090c6e16056290836b2d936ca7820b86f",
+    "@angular/build": "^19.0.0",
+    "@angular/cli": "^19.0.0",
+    "@angular/compiler-cli": "^19.0.0",
+    "@angular/localize": "^19.0.0",
     "@angular/ng-dev": "https://github.com/angular/dev-infra-private-ng-dev-builds.git#36946be4df61f6549ae3829c026022e47674eae2",
-    "@angular/platform-browser-dynamic": "^18.0.0",
-    "@angular/platform-server": "^18.0.0",
-    "@angular/router": "^18.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@angular/platform-server": "^19.0.0",
+    "@angular/router": "^19.0.0",
     "@babel/core": "^7.16.12",
     "@babel/helper-explode-assignable-expression": "^7.18.6",
     "@babel/helper-string-parser": "^7.22.5",
@@ -227,7 +228,7 @@
     "tsickle": "0.39.1",
     "tslint": "^6.1.3",
     "tsutils": "^3.21.0",
-    "typescript": "5.4.2",
+    "typescript": "5.6.3",
     "vrsource-tslint-rules": "6.0.0",
     "yaml": "^2.4.3",
     "yargs": "^17.3.1",

packages.bzl

@@ -17,6 +17,7 @@ _CDK_ENTRY_POINTS = [
     "layout",
     "bidi",
     "portal",
+    "private",
 ]
 
 _MATERIAL_ENTRY_POINTS = [

tools/postinstall/patches/@angular+bazel+16.0.0-next.6.patch

@@ -1,5 +1,5 @@
 diff --git a/node_modules/@angular/bazel/src/ng_module/ng_module.bzl b/node_modules/@angular/bazel/src/ng_module/ng_module.bzl
-index 99d7f6d..3ea60ea 100755
+index 5e82bcb..3c239f8 100755
 --- a/node_modules/@angular/bazel/src/ng_module/ng_module.bzl
 +++ b/node_modules/@angular/bazel/src/ng_module/ng_module.bzl
 @@ -18,6 +18,7 @@ load(
@@ -22,7 +22,7 @@ index 99d7f6d..3ea60ea 100755
 
      if not ctx.attr.type_check and ctx.attr.strict_templates:
          fail("Cannot set type_check = False and strict_templates = True for ng_module()")
-@@ -359,11 +360,11 @@ def _compile_action(
+@@ -355,11 +356,11 @@ def _compile_action(
 
  def _prodmode_compile_action(ctx, inputs, outputs, tsconfig_file, node_opts):
      outs = _expected_outs(ctx)
@@ -36,7 +36,7 @@ index 99d7f6d..3ea60ea 100755
      _compile_action(ctx, inputs, compile_action_outputs, tsconfig_file, node_opts, "devmode")
 
  # Note: We need to define `label` and `srcs_files` as `tsc_wrapped` passes
-@@ -417,9 +418,13 @@ def _ng_module_impl(ctx):
+@@ -413,9 +414,13 @@ def _ng_module_impl(ctx):
      # and issue https://github.com/bazelbuild/rules_nodejs/issues/57 for more details.
      ts_providers["providers"].extend([
          js_module_info(
@@ -51,7 +51,7 @@ index 99d7f6d..3ea60ea 100755
          js_ecma_script_module_info(
              sources = ts_providers["typescript"]["es6_sources"],
              deps = ctx.attr.deps,
-@@ -435,7 +440,7 @@ def _ng_module_impl(ctx):
+@@ -431,7 +436,7 @@ def _ng_module_impl(ctx):
              package_name = ctx.attr.package_name,
              package_path = ctx.attr.package_path,
              path = path,
@@ -60,20 +60,33 @@ index 99d7f6d..3ea60ea 100755
          ))
 
      return ts_providers_dict_to_struct(ts_providers)
+diff --git a/node_modules/@angular/bazel/src/ng_package/packager.mjs b/node_modules/@angular/bazel/src/ng_package/packager.mjs
+index 7184fd9..ef3e508 100755
+--- a/node_modules/@angular/bazel/src/ng_package/packager.mjs
++++ b/node_modules/@angular/bazel/src/ng_package/packager.mjs
+@@ -7,7 +7,7 @@
+  */
+ import * as fs from 'fs';
+ import * as path from 'path';
+-import { analyzeFileAndEnsureNoCrossImports } from './cross_entry_points_imports';
++import { analyzeFileAndEnsureNoCrossImports } from './cross_entry_points_imports.mjs';
+ /**
+  * List of known `package.json` fields which provide information about
+  * supported package formats and their associated entry paths.
 diff --git a/node_modules/@angular/bazel/src/ngc-wrapped/index.mjs b/node_modules/@angular/bazel/src/ngc-wrapped/index.mjs
-index 8681a4c..e3b497a 100755
+index def2972..3de33ba 100755
 --- a/node_modules/@angular/bazel/src/ngc-wrapped/index.mjs
 +++ b/node_modules/@angular/bazel/src/ngc-wrapped/index.mjs
-@@ -13,7 +13,7 @@ import * as fs from 'fs';
+@@ -12,7 +12,7 @@ import tscw from '@bazel/concatjs/internal/tsc_wrapped/index.js';
+ import * as fs from 'fs';
  import * as path from 'path';
- import * as tsickle from 'tsickle';
  import ts from 'typescript';
 -import { EXT, patchNgHostWithFileNameToModuleName as patchNgHost, relativeToRootDirs } from './utils';
 +import { EXT, patchNgHostWithFileNameToModuleName as patchNgHost, relativeToRootDirs } from './utils.mjs';
  // FIXME: we should be able to add the assets to the tsconfig so FileLoader
  // knows about them
  const NGC_ASSETS = /\.(css|html)$/;
-@@ -351,6 +351,12 @@ function gatherDiagnosticsForInputsOnly(options, bazelOpts, ngProgram) {
+@@ -349,6 +349,12 @@ function gatherDiagnosticsForInputsOnly(options, bazelOpts, ngProgram) {
      }
      return diagnostics;
  }
@@ -87,15 +100,15 @@ index 8681a4c..e3b497a 100755
   * @deprecated
   * Kept here just for compatibility with 1P tools. To be removed soon after 1P update.
 diff --git a/node_modules/@angular/bazel/src/ngc-wrapped/ngc-wrapped-main.mjs b/node_modules/@angular/bazel/src/ngc-wrapped/ngc-wrapped-main.mjs
-index 3649c11..0f4af3c 100755
+index 8efba56..d420348 100755
 --- a/node_modules/@angular/bazel/src/ngc-wrapped/ngc-wrapped-main.mjs
 +++ b/node_modules/@angular/bazel/src/ngc-wrapped/ngc-wrapped-main.mjs
 @@ -5,7 +5,7 @@
   * Use of this source code is governed by an MIT-style license that can be
-  * found in the LICENSE file at https://angular.io/license
+  * found in the LICENSE file at https://angular.dev/license
   */
 -import { main } from './index';
 +import { main } from './index.mjs';
- main(process.argv.slice(2)).then(exitCode => process.exitCode = exitCode).catch(e => {
-     console.error(e);
-     process.exitCode = 1;
+ main(process.argv.slice(2))
+     .then((exitCode) => (process.exitCode = exitCode))
+     .catch((e) => {