refactor(bazel): cleanup ng_package rule to not build fesm5 and esm5 output (#37623)

As of Angular Package Format v10, we no longer ship a `fesm5` and
`fesm5` output in packages. We made this change to the `ng_package`
rule but intentionally did not clean up related build actions.

This follow-up commit cleans this up by:

* No longer building fesm5 bundles, or providing esm2015 output.
* No longer requesting and building a third flavor for ESM5. We can
use TSC to downlevel ES2015 sources/prodmode output similarly to how it
is done in `ng-packagr`.

The third output flavor (ESM5) resulted in a build slow-down as we
required a full recompilation of sources. Now, we only have a single
compilation for prodmode output, and then downlevel it on-demand
to ES5 for the UMD bundles. Here is timing for building the release
packages in `angular/angular` before this change, and afterwards:

* Before: 462.157s = ~7.7min
* After: 339.703s =  ~5.6min

This signifies a time reduction by 27% when running
`./scripts/build/build-packages-dist.sh`.

PR Close #37623

packages/bazel/src/esm5.bzl

@@ -1,201 +0,0 @@
-# Copyright Google LLC All Rights Reserved.
-#
-# 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
-
-"""Provides ES5 syntax with ESModule import/exports.
-
-This exposes another flavor of output JavaScript, which is ES5 syntax
-with ES2015 module syntax (import/export).
-All Bazel rules should consume the standard dev or prod mode.
-However we need to publish this flavor on NPM, so it's necessary to be able
-to produce it.
-"""
-
-# The provider downstream rules use to access the outputs
-ESM5Info = provider(
-    doc = "Typescript compilation outputs in ES5 syntax with ES Modules",
-    fields = {
-        "transitive_output": """Dict of [rootDir, .js depset] entries.
-
-        The value is a depset of the .js output files.
-        The key is the prefix that should be stripped off the files
-        when resolving modules, eg. for file
-          bazel-bin/[external/wkspc/]path/to/package/label.esm5/path/to/package/file.js
-        the rootdir would be
-          bazel-bin/[external/wkspc/]path/to/package/label.esm5""",
-    },
-)
-
-def _map_closure_path(file):
-    result = file.short_path[:-len(".mjs")]
-
-    # short_path is meant to be used when accessing runfiles in a binary, where
-    # the CWD is inside the current repo. Therefore files in external repo have a
-    # short_path of ../external/wkspc/path/to/package
-    # We want to strip the first two segments from such paths.
-    if (result.startswith("../")):
-        result = "/".join(result.split("/")[2:])
-    return result + ".js"
-
-def _join(array):
-    return "/".join([p for p in array if p])
-
-def _esm5_outputs_aspect(target, ctx):
-    if not hasattr(target, "typescript"):
-        return []
-
-    # Workaround for https://github.com/bazelbuild/rules_typescript/issues/211
-    # TODO(gmagolan): generate esm5 output from ts_proto_library and have that
-    # output work with esm5_outputs_aspect
-    if not hasattr(target.typescript, "replay_params"):
-        print("WARNING: no esm5 output from target %s//%s:%s available" % (target.label.workspace_root, target.label.package, target.label.name))
-        return []
-    elif not target.typescript.replay_params:
-        # In case there are "replay_params" specified but the compile action didn't generate any
-        # outputs (e.g. only "d.ts" files), we cannot create ESM5 outputs for this target either.
-        return []
-
-    # We create a new tsconfig.json file that will have our compilation settings
-    tsconfig = ctx.actions.declare_file("%s_esm5.tsconfig.json" % target.label.name)
-
-    workspace = target.label.workspace_root if target.label.workspace_root else ""
-
-    # re-root the outputs under a ".esm5" directory so the path don't collide
-    out_dir = ctx.label.name + ".esm5"
-    if workspace:
-        out_dir = out_dir + "/" + workspace
-
-    outputs = [
-        ctx.actions.declare_file(_join([out_dir, _map_closure_path(f)]))
-        for f in target.typescript.replay_params.outputs
-        if not f.short_path.endswith(".externs.js")
-    ]
-
-    ctx.actions.run(
-        executable = ctx.executable._modify_tsconfig,
-        inputs = [target.typescript.replay_params.tsconfig],
-        outputs = [tsconfig],
-        arguments = [
-            target.typescript.replay_params.tsconfig.path,
-            tsconfig.path,
-            _join([workspace, target.label.package, ctx.label.name + ".esm5"]),
-            ctx.bin_dir.path,
-        ],
-    )
-
-    replay_compiler_path = target.typescript.replay_params.compiler.short_path
-    replay_compiler_name = replay_compiler_path.split("/")[-1]
-
-    # in windows replay_compiler path end with '.exe'
-    if replay_compiler_name.startswith("tsc_wrapped"):
-        compiler = ctx.executable._tsc_wrapped
-    elif replay_compiler_name.startswith("ngc-wrapped"):
-        compiler = ctx.executable._ngc_wrapped
-    else:
-        fail("Unknown replay compiler", target.typescript.replay_params.compiler.path)
-
-    inputs = [tsconfig]
-    if (type(target.typescript.replay_params.inputs) == type([])):
-        inputs.extend(target.typescript.replay_params.inputs)
-    else:
-        inputs.extend(target.typescript.replay_params.inputs.to_list())
-
-    ctx.actions.run(
-        progress_message = "Compiling TypeScript (ES5 with ES Modules) %s" % target.label,
-        inputs = inputs,
-        outputs = outputs,
-        arguments = [tsconfig.path],
-        executable = compiler,
-        execution_requirements = {
-            # TODO(alexeagle): enable worker mode for these compilations
-            "supports-workers": "0",
-        },
-        mnemonic = "ESM5",
-    )
-
-    root_dir = _join([
-        ctx.bin_dir.path,
-        workspace,
-        target.label.package,
-        ctx.label.name + ".esm5",
-    ])
-
-    transitive_output = {root_dir: depset(outputs)}
-    for dep in ctx.rule.attr.deps:
-        if ESM5Info in dep:
-            transitive_output.update(dep[ESM5Info].transitive_output)
-
-    return [ESM5Info(
-        transitive_output = transitive_output,
-    )]
-
-# Downstream rules can use this aspect to access the ESM5 output flavor.
-# Only terminal rules (those which expect never to be used in deps[]) should do
-# this.
-esm5_outputs_aspect = aspect(
-    implementation = _esm5_outputs_aspect,
-    # Recurse to the deps of any target we visit
-    attr_aspects = ["deps"],
-    attrs = {
-        "_modify_tsconfig": attr.label(
-            default = Label("//packages/bazel/src:modify_tsconfig"),
-            executable = True,
-            cfg = "host",
-        ),
-        "_tsc_wrapped": attr.label(
-            default = Label("@npm//@bazel/typescript/bin:tsc_wrapped"),
-            executable = True,
-            cfg = "host",
-        ),
-        # Replaced with "@npm//@angular/bazel/bin:ngc-wrapped" in the published package
-        "_ngc_wrapped": attr.label(
-            default = Label("//packages/bazel/src/ngc-wrapped"),
-            executable = True,
-            cfg = "host",
-        ),
-    },
-)
-
-def esm5_root_dir(ctx):
-    return ctx.label.name + ".esm5"
-
-def flatten_esm5(ctx):
-    """Merge together the .esm5 folders from the dependencies.
-
-    Two different dependencies A and B may have outputs like
-    `bazel-bin/path/to/A.esm5/path/to/lib.js`
-    `bazel-bin/path/to/B.esm5/path/to/main.js`
-
-    In order to run rollup on this app, in case main.js contains `import from './lib'`
-    they need to be together in the same root directory, so if we depend on both A and B
-    we need the outputs to be
-    `bazel-bin/path/to/my_rule.esm5/path/to/lib.js`
-    `bazel-bin/path/to/my_rule.esm5/path/to/main.js`
-
-    Args:
-      ctx: the skylark rule execution context
-
-    Returns:
-      depset of flattened files
-    """
-    esm5_sources = []
-    result = []
-    for dep in ctx.attr.deps:
-        if ESM5Info in dep:
-            transitive_output = dep[ESM5Info].transitive_output
-            esm5_sources.extend(transitive_output.values())
-    for f in depset(transitive = esm5_sources).to_list():
-        path = f.short_path[f.short_path.find(".esm5") + len(".esm5"):]
-        if (path.startswith("../")):
-            path = "external/" + path[3:]
-        rerooted_file = ctx.actions.declare_file("/".join([esm5_root_dir(ctx), path]))
-        result.append(rerooted_file)
-
-        # print("copy", f.short_path, "to", rerooted_file.short_path)
-        ctx.actions.expand_template(
-            output = rerooted_file,
-            template = f,
-            substitutions = {},
-        )
-    return depset(result)

packages/bazel/src/ng_package/BUILD.bazel

@@ -33,6 +33,7 @@ nodejs_binary(
         "@npm//rollup-plugin-commonjs",
         "@npm//rollup-plugin-node-resolve",
         "@npm//rollup-plugin-sourcemaps",
+        "@npm//typescript",
     ],
     entry_point = "@npm//:node_modules/rollup/dist/bin/rollup",
 )

packages/bazel/src/ng_package/ng_package.bzl

@@ -21,7 +21,6 @@ load(
     "create_package",
 )
 load("//packages/bazel/src:external.bzl", "FLAT_DTS_FILE_SUFFIX")
-load("//packages/bazel/src:esm5.bzl", "esm5_outputs_aspect", "esm5_root_dir", "flatten_esm5")
 load("//packages/bazel/src/ng_package:collect-type-definitions.bzl", "collect_type_definitions")
 
 # Prints a debug message if "--define=VERBOSE_LOGS=true" is specified.
@@ -195,7 +194,12 @@ def _compute_node_modules_root(ctx):
         node_modules_root = "external/npm/node_modules"
     return node_modules_root
 
-def _write_rollup_config(ctx, root_dir, filename = "_%s.rollup.conf.js", include_tslib = False):
+def _write_rollup_config(
+        ctx,
+        root_dir,
+        filename = "_%s.rollup.conf.js",
+        include_tslib = False,
+        downlevel_to_es5 = False):
     """Generate a rollup config file.
 
     Args:
@@ -239,6 +243,7 @@ def _write_rollup_config(ctx, root_dir, filename = "_%s.rollup.conf.js", include
             "TMPL_workspace_name": ctx.workspace_name,
             "TMPL_external": ", ".join(["'%s'" % e for e in external]),
             "TMPL_globals": ", ".join(["'%s': '%s'" % g for g in globals.items()]),
+            "TMPL_downlevel_to_es5": "true" if downlevel_to_es5 else "false",
         },
     )
 
@@ -347,23 +352,17 @@ def _ng_package_impl(ctx):
             esm_2015_files_depsets.append(dep[JSEcmaScriptModuleInfo].sources)
 
     esm_2015_files = _filter_out_generated_files(depset(transitive = esm_2015_files_depsets), "mjs")
-    esm5_sources = _filter_out_generated_files(flatten_esm5(ctx), "js")
 
     # These accumulators match the directory names where the files live in the
     # Angular package format.
     fesm2015 = []
-    fesm5 = []
     esm2015 = []
-    esm5 = []
     bundles = []
     bundled_type_definitions = []
     type_definitions = []
 
-    # For Angular Package Format v6, we put all the individual .js files in the
+    # Collect all prodmode esm2015 source files which should be copied into the
-    # esm5/ and esm2015/ folders.
+    # `esm2015` folder according to Angular Package Format v10.
-    for f in esm5_sources.to_list():
-        if f.path.endswith(".js"):
-            esm5.append(struct(js = f, map = None))
     for f in esm_2015_files.to_list():
         # tsickle generated `{module}.externs.js` file will be added to JSEcmaScriptModuleInfo sources
         # by ng_module so we include both .js and .mjs sources from the JSEcmaScriptModuleInfo provider
@@ -462,24 +461,16 @@ def _ng_package_impl(ctx):
             index_file.replace(".js", ".mjs"),
         ] if p])
 
-        es5_entry_point = "/".join([p for p in [
-            ctx.label.package,
-            entry_point,
-            index_file,
-        ] if p])
-
         if entry_point:
             # TODO jasonaden says there is no particular reason these filenames differ
             prefix = primary_entry_point_name(ctx.attr.name, ctx.attr.entry_point, ctx.attr.entry_point_name)
             umd_output_filename = "-".join([prefix] + entry_point.split("/"))
             fesm_output_filename = entry_point.replace("/", "__")
             fesm2015_output = ctx.actions.declare_file("fesm2015/%s.js" % fesm_output_filename)
-            fesm5_output = ctx.actions.declare_file("%s.js" % fesm_output_filename)
             umd_output = ctx.actions.declare_file("%s.umd.js" % umd_output_filename)
             min_output = ctx.actions.declare_file("%s.umd.min.js" % umd_output_filename)
         else:
             fesm2015_output = ctx.outputs.fesm2015
-            fesm5_output = ctx.outputs.fesm5
             umd_output = ctx.outputs.umd
             min_output = ctx.outputs.umd_min
 
@@ -489,11 +480,16 @@ def _ng_package_impl(ctx):
         for d in ctx.attr.deps:
             if NpmPackageInfo in d:
                 node_modules_files += _filter_js_inputs(d.files)
-        esm5_rollup_inputs = depset(node_modules_files, transitive = [esm5_sources])
 
+        esm2015_rollup_inputs = depset(node_modules_files, transitive = [esm_2015_files])
         esm2015_config = _write_rollup_config(ctx, ctx.bin_dir.path, filename = "_%s.rollup_esm2015.conf.js")
-        esm5_config = _write_rollup_config(ctx, "/".join([ctx.bin_dir.path, ctx.label.package, esm5_root_dir(ctx)]), filename = "_%s.rollup_esm5.conf.js")
+        umd_config = _write_rollup_config(
-        esm5_tslib_config = _write_rollup_config(ctx, "/".join([ctx.bin_dir.path, ctx.label.package, esm5_root_dir(ctx)]), filename = "_%s.rollup_esm5_tslib.conf.js", include_tslib = True)
+            ctx,
+            ctx.bin_dir.path,
+            filename = "_%s.rollup_umd.conf.js",
+            include_tslib = True,
+            downlevel_to_es5 = True,
+        )
 
         fesm2015.append(
             _run_rollup(
@@ -501,36 +497,25 @@ def _ng_package_impl(ctx):
                 "fesm2015",
                 esm2015_config,
                 es2015_entry_point,
-                depset(node_modules_files, transitive = [esm_2015_files]),
+                esm2015_rollup_inputs,
                 fesm2015_output,
                 format = "esm",
             ),
         )
 
-        fesm5.append(
-            _run_rollup(
-                ctx,
-                "fesm5",
-                esm5_config,
-                es5_entry_point,
-                esm5_rollup_inputs,
-                fesm5_output,
-                format = "esm",
-            ),
-        )
-
         bundles.append(
             _run_rollup(
                 ctx,
                 "umd",
-                esm5_tslib_config,
+                umd_config,
-                es5_entry_point,
+                es2015_entry_point,
-                esm5_rollup_inputs,
+                esm2015_rollup_inputs,
                 umd_output,
                 module_name = module_name,
                 format = "umd",
             ),
         )
+
         terser_sourcemap = _terser(
             ctx,
             umd_output,
@@ -541,11 +526,10 @@ def _ng_package_impl(ctx):
     packager_inputs = (
         ctx.files.srcs +
         ctx.files.data +
-        esm5_sources.to_list() +
         type_definitions +
         bundled_type_definitions +
-        [f.js for f in fesm2015 + fesm5 + esm2015 + esm5 + bundles] +
+        [f.js for f in fesm2015 + esm2015 + bundles] +
-        [f.map for f in fesm2015 + fesm5 + esm2015 + esm5 + bundles if f.map]
+        [f.map for f in fesm2015 + esm2015 + bundles if f.map]
     )
 
     packager_args = ctx.actions.args()
@@ -582,9 +566,7 @@ def _ng_package_impl(ctx):
         packager_args.add("")
 
     packager_args.add_joined(_flatten_paths(fesm2015), join_with = ",", omit_if_empty = False)
-    packager_args.add_joined(_flatten_paths(fesm5), join_with = ",", omit_if_empty = False)
     packager_args.add_joined(_flatten_paths(esm2015), join_with = ",", omit_if_empty = False)
-    packager_args.add_joined(_flatten_paths(esm5), join_with = ",", omit_if_empty = False)
     packager_args.add_joined(_flatten_paths(bundles), join_with = ",", omit_if_empty = False)
     packager_args.add_joined([s.path for s in ctx.files.srcs], join_with = ",", omit_if_empty = False)
     packager_args.add_joined([s.path for s in type_definitions], join_with = ",", omit_if_empty = False)
@@ -627,7 +609,7 @@ def _ng_package_impl(ctx):
         files = depset([package_dir]),
     )]
 
-_NG_PACKAGE_DEPS_ASPECTS = [esm5_outputs_aspect, ng_package_module_mappings_aspect, node_modules_aspect]
+_NG_PACKAGE_DEPS_ASPECTS = [ng_package_module_mappings_aspect, node_modules_aspect]
 
 _NG_PACKAGE_ATTRS = dict(PKG_NPM_ATTRS, **{
     "srcs": attr.label_list(
@@ -800,7 +782,6 @@ def _ng_package_outputs(name, entry_point, entry_point_name):
 
     basename = primary_entry_point_name(name, entry_point, entry_point_name)
     outputs = {
-        "fesm5": "fesm5/%s.js" % basename,
         "fesm2015": "fesm2015/%s.js" % basename,
         "umd": "%s.umd.js" % basename,
         "umd_min": "%s.umd.min.js" % basename,

packages/bazel/src/ng_package/packager.ts

@@ -60,15 +60,9 @@ function main(args: string[]): number {
       // List of rolled-up flat ES2015 modules
       fesm2015Arg,
 
-      // List of rolled-up flat ES5 modules
-      fesm5Arg,
-
       // List of individual ES2015 modules
       esm2015Arg,
 
-      // List of individual ES5 modules
-      esm5Arg,
-
       // List of all UMD bundles generated by rollup.
       bundlesArg,
 
@@ -92,9 +86,7 @@ function main(args: string[]): number {
   ] = params;
 
   const fesm2015 = fesm2015Arg.split(',').filter(s => !!s);
-  const fesm5 = fesm5Arg.split(',').filter(s => !!s);
   const esm2015 = esm2015Arg.split(',').filter(s => !!s);
-  const esm5 = esm5Arg.split(',').filter(s => !!s);
   const bundles = bundlesArg.split(',').filter(s => !!s);
   const typeDefinitions = typeDefinitionsArg.split(',').filter(s => !!s);
   const srcs = srcsArg.split(',').filter(s => !!s);
@@ -149,28 +141,20 @@ function main(args: string[]): number {
 
   /**
    * Relativize the path where a file is written.
-   * @param file a path containing a re-rooted segment like .esm5
+   * @param file a path containing a re-rooted segment like `.esm2015`
-   * @param suffix the re-rooted directory
    * @param outDir path where we copy the file, relative to the out
    */
-  function writeEsmFile(file: string, suffix: string, outDir: string) {
+  function writeEsmFile(file: string, outDir: string) {
-    function relPath(file: string, suffix: string) {
+    // Path computed relative to the current package in bazel-bin. e.g. a ES2015 output file
-      if (suffix) {
+    // in `bazel-out/<..>/packages/core/src/di.js` should be stored in `{out_dir}/src/di.js`
-        // Note that the specified file path is always using the posix path delimiter.
+    // if the package target has been declared in `<..>/packages/core`.
-        const root =
+    const packageRelativePath = path.dirname(path.relative(binDir, file));
-            suffix ? file.substr(0, file.lastIndexOf(`${suffix}/`) + suffix.length + 1) : binDir;
+    if (!packageRelativePath.startsWith('..')) {
-        return path.dirname(path.relative(path.join(root, srcDir), file));
+      copyFile(file, path.join(out, outDir), packageRelativePath);
-      } else {
-        return path.dirname(path.relative(binDir, file));
-      }
-    }
-    const rel = relPath(file, suffix);
-    if (!rel.startsWith('..')) {
-      copyFile(file, path.join(out, outDir), rel);
     }
   }
 
-  esm2015.forEach(file => writeEsmFile(file, '', 'esm2015'));
+  esm2015.forEach(file => writeEsmFile(file, 'esm2015'));
 
   bundles.forEach(bundle => {
     copyFile(bundle, out, 'bundles');
@@ -194,7 +178,6 @@ function main(args: string[]): number {
     const moduleFiles = modulesManifest[moduleName];
     const relative = path.relative(binDir, moduleFiles['index']);
 
-    moduleFiles['esm5_index'] = path.join(binDir, 'esm5', relative);
     moduleFiles['esm2015_index'] = path.join(binDir, 'esm2015', relative);
 
     // Metadata file is optional as entry-points can be also built
@@ -379,7 +362,7 @@ function main(args: string[]): number {
   }
 
   // e.g. @angular/common/http/testing -> ../../bundles/common-http-testing.umd.js
-  // or   @angular/common/http/testing -> ../../fesm5/http/testing.js
+  // or   @angular/common/http/testing -> ../../fesm2015/http/testing.js
   function getBundleName(packageName: string, dir: string) {
     const parts = packageName.split('/');
     // Remove the scoped package part, like @angular if present

packages/bazel/src/ng_package/rollup.config.js

@@ -14,6 +14,7 @@ const sourcemaps = require('rollup-plugin-sourcemaps');
 const commonjs = require('rollup-plugin-commonjs');
 const path = require('path');
 const fs = require('fs');
+const ts = require('typescript');
 
 function log_verbose(...m) {
   // This is a template file so we use __filename to output the actual filename
@@ -25,6 +26,7 @@ const rootDir = 'TMPL_root_dir';
 const bannerFile = TMPL_banner_file;
 const stampData = TMPL_stamp_data;
 const moduleMappings = TMPL_module_mappings;
+const downlevelToEs5 = TMPL_downlevel_to_es5;
 const nodeModulesRoot = 'TMPL_node_modules_root';
 
 log_verbose(`running with
@@ -144,6 +146,27 @@ if (bannerFile) {
   }
 }
 
+const downlevelToEs5Plugin = {
+  name: 'downlevel-to-es5',
+  transform: (code, filePath) => {
+    const compilerOptions = {
+      target: ts.ScriptTarget.ES5,
+      module: ts.ModuleKind.ES2015,
+      allowJs: true,
+      sourceMap: true,
+      downlevelIteration: true,
+      importHelpers: true,
+      mapRoot: path.dirname(filePath),
+    };
+
+    const {outputText, sourceMapText} = ts.transpileModule(code, {compilerOptions});
+    return {
+      code: outputText,
+      map: JSON.parse(sourceMapText),
+    };
+  },
+};
+
 const plugins = [
   {
     name: 'resolveBazel',
@@ -158,6 +181,10 @@ const plugins = [
   sourcemaps(),
 ];
 
+if (downlevelToEs5) {
+  plugins.push(downlevelToEs5Plugin);
+}
+
 const config = {
   plugins,
   external: [TMPL_external],

packages/bazel/test/ng_package/example_package.golden

@@ -180,11 +180,11 @@ Hello
     var A11yModule = /** @class */ (function () {
         function A11yModule() {
         }
-        A11yModule.decorators = [
-            { type: core.NgModule, args: [{},] }
-        ];
         return A11yModule;
     }());
+    A11yModule.decorators = [
+        { type: core.NgModule, args: [{},] }
+    ];
 
     /**
      * @license
@@ -220,14 +220,15 @@ Hello
      *
      * 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
-     */var n=function(){function e(){}return e.decorators=[{type:o.NgModule,args:[{}]}],e}();
+     */var t;(t=function t(){}).decorators=[{type:o.NgModule,args:[{}]}],
 /**
      * @license
      * Copyright Google LLC All Rights Reserved.
      *
      * 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
-     */e.A11yModule=n,Object.defineProperty(e,"__esModule",{value:!0})}));
+     */
+e.A11yModule=t,Object.defineProperty(e,"__esModule",{value:!0})}));
 
 --- bundles/waffels-imports.umd.js ---
 
@@ -253,12 +254,12 @@ Hello
     var MySecondService = /** @class */ (function () {
         function MySecondService() {
         }
-        MySecondService.ɵprov = i0.ɵɵdefineInjectable({ factory: function MySecondService_Factory() { return new MySecondService(); }, token: MySecondService, providedIn: "root" });
-        MySecondService.decorators = [
-            { type: i0.Injectable, args: [{ providedIn: 'root' },] }
-        ];
         return MySecondService;
     }());
+    MySecondService.ɵprov = i0.ɵɵdefineInjectable({ factory: function MySecondService_Factory() { return new MySecondService(); }, token: MySecondService, providedIn: "root" });
+    MySecondService.decorators = [
+        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
+    ];
 
     /**
      * @license
@@ -271,15 +272,15 @@ Hello
         function MyService(secondService) {
             this.secondService = secondService;
         }
-        MyService.ɵprov = i0.ɵɵdefineInjectable({ factory: function MyService_Factory() { return new MyService(i0.ɵɵinject(MySecondService)); }, token: MyService, providedIn: "root" });
-        MyService.decorators = [
-            { type: i0.Injectable, args: [{ providedIn: 'root' },] }
-        ];
-        MyService.ctorParameters = function () { return [
-            { type: MySecondService }
-        ]; };
         return MyService;
     }());
+    MyService.ɵprov = i0.ɵɵdefineInjectable({ factory: function MyService_Factory() { return new MyService(i0.ɵɵinject(MySecondService)); }, token: MyService, providedIn: "root" });
+    MyService.decorators = [
+        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
+    ];
+    MyService.ctorParameters = function () { return [
+        { type: MySecondService }
+    ]; };
 
     /**
      * @license
@@ -316,7 +317,7 @@ Hello
      *
      * 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
-     */var n=function(){function e(){}return e.ɵprov=t.ɵɵdefineInjectable({factory:function t(){return new e},token:e,providedIn:"root"}),e.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],e}(),r=function(){function e(e){this.secondService=e}return e.ɵprov=t.ɵɵdefineInjectable({factory:function r(){return new e(t.ɵɵinject(n))},token:e,providedIn:"root"}),e.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],e.ctorParameters=function(){return[{type:n}]},e}();
+     */var o,r;(o=function o(){}).ɵprov=t.ɵɵdefineInjectable({factory:function e(){return new o},token:o,providedIn:"root"}),o.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],(r=function r(e){this.secondService=e}).ɵprov=t.ɵɵdefineInjectable({factory:function e(){return new r(t.ɵɵinject(o))},token:r,providedIn:"root"}),r.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],r.ctorParameters=function(){return[{type:o}]},
 /**
      * @license
      * Copyright Google LLC All Rights Reserved.
@@ -324,14 +325,7 @@ Hello
      * 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
      */
-/**
+e.MyService=r,e.ɵangular_packages_bazel_test_ng_package_example_imports_imports_a=o,Object.defineProperty(e,"__esModule",{value:!0})}));
-     * @license
-     * Copyright Google LLC All Rights Reserved.
-     *
-     * 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
-     */
-e.MyService=r,e.ɵangular_packages_bazel_test_ng_package_example_imports_imports_a=n,Object.defineProperty(e,"__esModule",{value:!0})}));
 
 --- bundles/waffels-secondary.umd.js ---
 
@@ -357,11 +351,11 @@ e.MyService=r,e.ɵangular_packages_bazel_test_ng_package_example_imports_imports
     var SecondaryModule = /** @class */ (function () {
         function SecondaryModule() {
         }
-        SecondaryModule.decorators = [
-            { type: core.NgModule, args: [{},] }
-        ];
         return SecondaryModule;
     }());
+    SecondaryModule.decorators = [
+        { type: core.NgModule, args: [{},] }
+    ];
     var a = 1;
 
     /**
@@ -399,7 +393,7 @@ e.MyService=r,e.ɵangular_packages_bazel_test_ng_package_example_imports_imports
      *
      * 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
-     */var n=function(){function e(){}return e.decorators=[{type:o.NgModule,args:[{}]}],e}();
+     */var n;(n=function n(){}).decorators=[{type:o.NgModule,args:[{}]}],
 /**
      * @license
      * Copyright Google LLC All Rights Reserved.
@@ -433,11 +427,11 @@ e.SecondaryModule=n,e.a=1,Object.defineProperty(e,"__esModule",{value:!0})}));
     var MyModule = /** @class */ (function () {
         function MyModule() {
         }
-        MyModule.decorators = [
-            { type: core.NgModule, args: [{},] }
-        ];
         return MyModule;
     }());
+    MyModule.decorators = [
+        { type: core.NgModule, args: [{},] }
+    ];
 
     /**
      * @license
@@ -473,14 +467,15 @@ e.SecondaryModule=n,e.a=1,Object.defineProperty(e,"__esModule",{value:!0})}));
      *
      * 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
-     */var n=function(){function e(){}return e.decorators=[{type:o.NgModule,args:[{}]}],e}();
+     */var t;(t=function t(){}).decorators=[{type:o.NgModule,args:[{}]}],
 /**
      * @license
      * Copyright Google LLC All Rights Reserved.
      *
      * 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
-     */e.MyModule=n,Object.defineProperty(e,"__esModule",{value:!0})}));
+     */
+e.MyModule=t,Object.defineProperty(e,"__esModule",{value:!0})}));
 
 --- esm2015/a11y/a11y.externs.js ---
 

packages/bazel/test/ng_package/example_with_ts_library_package.golden

@@ -85,11 +85,11 @@ License: MIT
     var PortalModule = /** @class */ (function () {
         function PortalModule() {
         }
-        PortalModule.decorators = [
-            { type: core.NgModule, args: [{},] }
-        ];
         return PortalModule;
     }());
+    PortalModule.decorators = [
+        { type: core.NgModule, args: [{},] }
+    ];
     var a = 1;
 
     /**
@@ -127,7 +127,7 @@ License: MIT
      *
      * 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
-     */var t=function(){function e(){}return e.decorators=[{type:o.NgModule,args:[{}]}],e}();
+     */var t;(t=function t(){}).decorators=[{type:o.NgModule,args:[{}]}],
 /**
      * @license
      * Copyright Google LLC All Rights Reserved.