build: switch devmode output to ES2020 and ESM

Switches the devmode output to ES2020 and ESM. This is in preparation
for allowing fast rebuilds with the Angular FW v13 packages.

Since these packages are now strict ESM, and rely on the linker, we need
to have some bundling in between for tests, or the dev-app (this is
actually even faster than relying on ConcatJS/RequireJS/SystemJS).

This bundling should not need to consume the prodmode output, but rather
use the devmode output because otherwise the usual development workflow
would result in both devmode + prodmode being requested.. resulting in a
significant slow-down due to 2x TS compilations. Devmode output is
always requested for dependencies on `ts_library` or `ng_module` to
accomplish the TS fine-grained TS compilations. Since this is the case,
we just naturally use the devmode output for bundling of tests/dev-app..
so inherently we need to switch devmode to ESM for enabling bundling.

Author: devversion

integration/size-test/BUILD.bazel

@@ -11,6 +11,8 @@ exports_files([
 ts_library(
     name = "check-size",
     srcs = ["check-size.ts"],
+    # TODO(ESM): remove this once the Bazel NodeJS rules can handle ESM with `nodejs_binary`.
+    devmode_module = "commonjs",
     deps = [
         "@npm//@bazel/runfiles",
         "@npm//@types/node",

package.json

@@ -46,7 +46,7 @@
     "integration-tests:size-test": "bazel test //integration/size-test/...",
     "check-mdc-tests": "ts-node --project scripts/tsconfig.json scripts/check-mdc-tests.ts",
     "check-mdc-exports": "ts-node --project scripts/tsconfig.json scripts/check-mdc-exports.ts",
-    "check-tooling-setup": "yarn tsc --project tools/tsconfig-ci.json && yarn tsc --project .ng-dev/tsconfig.json",
+    "check-tooling-setup": "yarn tsc --project tools/tsconfig.json && yarn tsc --project .ng-dev/tsconfig.json",
     "tsc": "node ./node_modules/typescript/bin/tsc",
     "prepare": "husky install"
   },

scripts/tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "outDir": "../dist/dev-infra-scripts",
-    "target": "es2015",
-    "lib": ["es2016"],
+    "target": "es2020",
+    "lib": ["es2020"],
     "moduleResolution": "node",
     "types": ["node"],
     "strict": true,

src/bazel-tsconfig-build.json

@@ -20,23 +20,22 @@
     "noImplicitThis": true,
     "importHelpers": true,
     "strictBindCallApply": true,
+    "esModuleInterop": true,
     "newLine": "lf",
     // Bazel either uses "umd" or "esnext". We replicate this here for IDE support.
     // https://github.com/bazelbuild/rules_typescript/blob/master/internal/common/tsconfig.bzl#L199
     "module": "esnext",
     "moduleResolution": "node",
     "sourceMap": true,
     "inlineSources": true,
-    "target": "es2015",
-    "lib": ["es2015", "dom"],
+    "target": "es2020",
+    "lib": ["es2020", "dom"],
     "skipLibCheck": true,
     "types": ["tslib"]
   },
   "bazelOptions": {
     // Note: We can remove this once we fully switched away from Gulp. Currently we still set
     // some options here just in favor of the standard tsconfig's which extending this one.
-    "suppressTsconfigOverrideWarnings": true,
-    // See https://github.com/angular/angular/issues/29107
-    "devmodeTargetOverride": "es5"
+    "suppressTsconfigOverrideWarnings": true
   }
 }

src/bazel-tsconfig-test.json

@@ -8,8 +8,6 @@
     "types": ["jasmine"]
   },
   "bazelOptions": {
-    "suppressTsconfigOverrideWarnings": true,
-    // See https://github.com/angular/angular/issues/29107
-    "devmodeTargetOverride": "es5"
+    "suppressTsconfigOverrideWarnings": true
   }
 }

src/cdk/schematics/BUILD.bazel

@@ -22,8 +22,8 @@ ts_library(
             "testing/**/*.ts",
         ],
     ),
-    # Schematics do not need to run in browsers and can use `commonjs`
-    # as format instead the default `umd` format.
+    # Schematics can not yet run in ESM module. For now we continue to use CommonJS.
+    # TODO(ESM): remove this once the Angular CLI supports ESM schematics.
     devmode_module = "commonjs",
     prodmode_module = "commonjs",
     tsconfig = ":tsconfig.json",
@@ -73,6 +73,10 @@ ts_library(
             "**/files/**/*.spec.ts",
         ],
     ),
+    # Schematics can not yet run in ESM module. For now we continue to use CommonJS.
+    # TODO(ESM): remove this once the Angular CLI supports ESM schematics.
+    devmode_module = "commonjs",
+    prodmode_module = "commonjs",
     tsconfig = ":tsconfig.json",
     deps = [
         ":schematics",

src/cdk/schematics/testing/BUILD.bazel

@@ -6,8 +6,8 @@ ts_library(
     name = "testing",
     testonly = True,
     srcs = glob(["**/*.ts"]),
-    # Schematics do not need to run in browsers and can use `commonjs`
-    # as format instead the default `umd` format.
+    # Schematics can not yet run in ESM module. For now we continue to use CommonJS.
+    # TODO(ESM): remove this once the Angular CLI supports ESM schematics.
     devmode_module = "commonjs",
     prodmode_module = "commonjs",
     tsconfig = "tsconfig.json",

src/cdk/schematics/update-tool/BUILD.bazel

@@ -5,8 +5,8 @@ package(default_visibility = ["//visibility:public"])
 ts_library(
     name = "update-tool",
     srcs = glob(["**/*.ts"]),
-    # Schematics do not need to run in browsers and can use `commonjs`
-    # as format instead the default `umd` format.
+    # Schematics can not yet run in ESM module. For now we continue to use CommonJS.
+    # TODO(ESM): remove this once the Angular CLI supports ESM schematics.
     devmode_module = "commonjs",
     prodmode_module = "commonjs",
     tsconfig = ":tsconfig.json",

src/cdk/testing/tests/BUILD.bazel

@@ -82,6 +82,8 @@ ts_library(
     name = "webdriver_test_sources",
     testonly = True,
     srcs = ["webdriver.e2e.spec.ts"],
+    # TODO(ESM): remove this once the Bazel NodeJS rules can handle ESM with `nodejs_binary`.
+    devmode_module = "commonjs",
     deps = [
         ":cross_environment_specs",
         ":test_harnesses",

src/components-examples/material/datepicker/BUILD.bazel

@@ -1,4 +1,3 @@
-load("@npm//@bazel/typescript:index.bzl", "ts_config")
 load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 package(default_visibility = ["//visibility:public"])
@@ -13,7 +12,6 @@ ng_module(
         "**/*.html",
         "**/*.css",
     ]),
-    tsconfig = ":tsconfig",
     deps = [
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
@@ -33,12 +31,6 @@ ng_module(
     ],
 )
 
-ts_config(
-    name = "tsconfig",
-    src = "tsconfig-build.json",
-    deps = ["//src:bazel-tsconfig-build.json"],
-)
-
 filegroup(
     name = "source-files",
     srcs = glob([