build: switch ng_module and ts_library devmode to ES2020 ESM (#48521)

Currently the devmode output for `ng_module` and `ts_library` is
using ES5 CommonJS UMD. To bring it in sync with prodmode and
to start with our long-term migration to full ESM- the devmode
is updated to to ES2020 ES modules too.

This will require more tricks to make devmod work with the bazel
setup and also tests may need to be refactored given them relying
on ES5 CJS features, like for `spyOn` jasmine patching etc.

PR Close #48521

packages/bazel/src/ng_module/ng_module.bzl

@@ -60,7 +60,7 @@ def _flat_module_out_file(ctx):
     from other attributes (name)
 
     Args:
-      ctx: skylark rule execution context
+      ctx: starlark rule execution context
 
     Returns:
       a basename used for the flat module out (no extension)
@@ -76,7 +76,7 @@ def _should_produce_flat_module_outs(ctx):
     based on the presence of the module_name attribute.
 
     Args:
-      ctx: skylark rule execution context
+      ctx: starlark rule execution context
 
     Returns:
       true iff we should run the bundle_index_host to produce flat module metadata and bundle index
@@ -118,7 +118,7 @@ def _expected_outs(ctx):
             else:
                 devmode_js = [".js"]
                 if not _is_bazel():
-                    devmode_js += [".ngfactory.js"]
+                    devmode_js.append(".ngfactory.js")
         else:
             continue
 
@@ -238,17 +238,13 @@ def _ngc_tsconfig(ctx, files, srcs, **kwargs):
     })
 
     # For prodmode, the compilation target is set to `ES2020`. `@bazel/typecript`
-    # using the `create_tsconfig` function sets `ES2015` by default.
+    # using the `create_tsconfig` function sets `ES2015` by default for prodmode
+    # and uses ES5 with UMD for devmode. We want to consistenly use ES2020 ESM.
     # https://github.com/bazelbuild/rules_nodejs/blob/901df3868e3ceda177d3ed181205e8456a5592ea/third_party/github.com/bazelbuild/rules_typescript/internal/common/tsconfig.bzl#L195
     # TODO(devversion): In the future, combine prodmode and devmode so we can get rid of the
     # ambiguous terminology and concept that can result in slow-down for development workflows.
-    if not is_devmode:
-        # Note: Keep in sync with the `prodmode_target` for `ts_library` in `tools/defaults.bzl`
-        tsconfig["compilerOptions"]["target"] = "es2020"
-    else:
-        # For devmode output, we use ES2015 to match with what `ts_library` produces by default.
-        # https://github.com/bazelbuild/rules_nodejs/blob/9b36274dba34204625579463e3da054a9f42cb47/packages/typescript/internal/build_defs.bzl#L83.
-        tsconfig["compilerOptions"]["target"] = "es2015"
+    tsconfig["compilerOptions"]["target"] = "es2020"
+    tsconfig["compilerOptions"]["module"] = "esnext"
 
     return tsconfig
 
@@ -278,7 +274,7 @@ def ngc_compile_action(
     as part of the public API.
 
     Args:
-      ctx: skylark context
+      ctx: starlark context
       label: the label of the ng_module being compiled
       inputs: passed to the ngc action's inputs
       outputs: passed to the ngc action's outputs
@@ -315,7 +311,7 @@ def ngc_compile_action(
     # Two at-signs escapes the argument so it's passed through to ngc
     # rather than the contents getting expanded.
     if supports_workers == "1":
-        arguments += ["@@" + tsconfig_file.path]
+        arguments.append("@@" + tsconfig_file.path)
     else:
         arguments += ["-p", tsconfig_file.path]
 
@@ -414,7 +410,7 @@ def ng_module_impl(ctx, ts_compile_actions):
     and is not meant as a public API.
 
     Args:
-      ctx: the skylark rule context
+      ctx: the starlark rule context
       ts_compile_actions: generates all the actions to run an ngc compilation
 
     Returns:

tools/defaults.bzl

@@ -102,7 +102,17 @@ def ts_devserver(**kwargs):
 
 ts_config = _ts_config
 
-def ts_library(name, tsconfig = None, testonly = False, deps = [], module_name = None, package_name = None, **kwargs):
+def ts_library(
+        name,
+        tsconfig = None,
+        testonly = False,
+        deps = [],
+        module_name = None,
+        package_name = None,
+        # TODO(devversion): disallow configuration of the target when binaries/schematics can be ESM.
+        devmode_target = None,
+        devmode_module = None,
+        **kwargs):
     """Default values for ts_library"""
     deps = deps + ["@npm//tslib"]
     if testonly:
@@ -122,16 +132,24 @@ def ts_library(name, tsconfig = None, testonly = False, deps = [], module_name =
     if not package_name:
         package_name = _default_module_name(testonly)
 
+    default_target = "es2020"
+    default_module = "esnext"
+
     _ts_library(
         name = name,
         tsconfig = tsconfig,
         testonly = testonly,
         deps = deps,
+        # We also set devmode output to the same settings as prodmode as a first step in
+        # combining devmode and prodmode output.
+        devmode_target = devmode_target if devmode_target != None else default_target,
+        devmode_module = devmode_module if devmode_module != None else default_module,
         # For prodmode, the target is set to `ES2020`. `@bazel/typecript` sets `ES2015` by
         # default. Note that this should be in sync with the `ng_module` tsconfig generation.
         # https://github.com/bazelbuild/rules_nodejs/blob/901df3868e3ceda177d3ed181205e8456a5592ea/third_party/github.com/bazelbuild/rules_typescript/internal/common/tsconfig.bzl#L195
         # https://github.com/bazelbuild/rules_nodejs/blob/9b36274dba34204625579463e3da054a9f42cb47/packages/typescript/internal/build_defs.bzl#L85.
-        prodmode_target = "es2020",
+        prodmode_target = default_target,
+        prodmode_module = default_module,
         # `module_name` is used for AMD module names within emitted JavaScript files.
         module_name = module_name,
         # `package_name` can be set to allow for the Bazel NodeJS linker to run. This