build: migrate angular-optimization from devinfra to devtools (#62503)

Migrate angular-optimization to devtools instead of loading via npm package

PR Close #62503

.aspect/rules/external_repository_action_cache/npm_translate_lock_MzA5NzUwNzMx

@@ -8,7 +8,7 @@ adev/shared-docs/package.json=450629456
 adev/shared-docs/pipeline/api-gen/package.json=939673974
 integration/package.json=-239561259
 modules/package.json=-2081919225
-package.json=921772799
+package.json=517425656
 packages/animations/package.json=-678724831
 packages/benchpress/package.json=-1908328724
 packages/common/package.json=1729763064
@@ -26,7 +26,7 @@ packages/platform-server/package.json=-737662753
 packages/router/package.json=860819913
 packages/upgrade/package.json=16347051
 packages/zone.js/package.json=-1005735564
-pnpm-lock.yaml=510380633
+pnpm-lock.yaml=1175272458
 pnpm-workspace.yaml=1738525657
 tools/bazel/rules_angular_store/package.json=-239561259
 yarn.lock=1381149066

WORKSPACE

@@ -280,7 +280,7 @@ yarn_install(
 
 git_repository(
     name = "devinfra",
-    commit = "6f54d143077baef582d70873722166fdc040066c",
+    commit = "dfe138678e4edb4789fbe40ae7792c046de3b4bd",
     remote = "https://github.com/angular/dev-infra.git",
 )
 

devtools/projects/demo-no-zone/src/BUILD.bazel

@@ -20,11 +20,10 @@ ng_project(
 esbuild(
     name = "bundle",
     srcs = [
-        "//:node_modules/@angular/build-tooling",
-        "//devtools/tools/esbuild:esbuild_base",
-        "//devtools/tools/esbuild:esbuild_config_esm",
+        "//devtools/tools/esbuild:esbuild_base_rjs",
+        "//devtools/tools/esbuild:esbuild_config_esm_rjs",
     ],
-    config = "//devtools/tools/esbuild:esbuild_config_esm",
+    config = "//devtools/tools/esbuild:esbuild-esm.config.mjs",
     entry_points = [":main.ts"],
     platform = "browser",
     splitting = False,

devtools/projects/shell-browser/src/BUILD.bazel

@@ -66,11 +66,10 @@ ng_project(
 esbuild(
     name = "bundle",
     srcs = [
-        "//:node_modules/@angular/build-tooling",
-        "//devtools/tools/esbuild:esbuild_base",
-        "//devtools/tools/esbuild:esbuild_config_esm_prod",
+        "//devtools/tools/esbuild:esbuild_base_rjs",
+        "//devtools/tools/esbuild:esbuild_config_esm_prod_rjs",
     ],
-    config = "//devtools/tools/esbuild:esbuild_config_esm_prod",
+    config = "//devtools/tools/esbuild:esbuild-esm-prod.config.mjs",
     entry_points = [":main.ts"],
     minify = True,
     platform = "browser",
@@ -90,12 +89,11 @@ esbuild(
 esbuild(
     name = "devtools_bundle",
     srcs = [
-        "//:node_modules/@angular/build-tooling",
         "//:node_modules/tslib",
-        "//devtools/tools/esbuild:esbuild_base",
-        "//devtools/tools/esbuild:esbuild_config_esm",
+        "//devtools/tools/esbuild:esbuild_base_rjs",
+        "//devtools/tools/esbuild:esbuild_config_esm_rjs",
     ],
-    config = "//devtools/tools/esbuild:esbuild_config_esm",
+    config = "//devtools/tools/esbuild:esbuild-esm.config.mjs",
     entry_point = "devtools.ts",
     format = "iife",
     minify = True,

devtools/projects/shell-browser/src/app/BUILD.bazel

@@ -209,12 +209,11 @@ ts_project(
 esbuild(
     name = "detect_angular_for_extension_icon_bundle",
     srcs = [
-        "//:node_modules/@angular/build-tooling",
         "//:node_modules/tslib",
-        "//devtools/tools/esbuild:esbuild_base",
-        "//devtools/tools/esbuild:esbuild_config_iife",
+        "//devtools/tools/esbuild:esbuild_base_rjs",
+        "//devtools/tools/esbuild:esbuild_config_iife_rjs",
     ],
-    config = "//devtools/tools/esbuild:esbuild_config_iife",
+    config = "//devtools/tools/esbuild:esbuild-iife.config.mjs",
     entry_point = "detect-angular-for-extension-icon.ts",
     format = "iife",
     minify = True,
@@ -229,12 +228,11 @@ esbuild(
 esbuild(
     name = "backend_bundle",
     srcs = [
-        "//:node_modules/@angular/build-tooling",
         "//:node_modules/tslib",
-        "//devtools/tools/esbuild:esbuild_base",
-        "//devtools/tools/esbuild:esbuild_config_iife",
+        "//devtools/tools/esbuild:esbuild_base_rjs",
+        "//devtools/tools/esbuild:esbuild_config_iife_rjs",
     ],
-    config = "//devtools/tools/esbuild:esbuild_config_iife",
+    config = "//devtools/tools/esbuild:esbuild-iife.config.mjs",
     entry_point = "backend.ts",
     format = "iife",
     minify = True,
@@ -249,12 +247,11 @@ esbuild(
 esbuild(
     name = "ng_validate_bundle",
     srcs = [
-        "//:node_modules/@angular/build-tooling",
         "//:node_modules/tslib",
-        "//devtools/tools/esbuild:esbuild_base",
-        "//devtools/tools/esbuild:esbuild_config_iife",
+        "//devtools/tools/esbuild:esbuild_base_rjs",
+        "//devtools/tools/esbuild:esbuild_config_iife_rjs",
     ],
-    config = "//devtools/tools/esbuild:esbuild_config_iife",
+    config = "//devtools/tools/esbuild:esbuild-iife.config.mjs",
     entry_point = "ng-validate.ts",
     format = "iife",
     minify = True,
@@ -269,12 +266,11 @@ esbuild(
 esbuild(
     name = "background_bundle",
     srcs = [
-        "//:node_modules/@angular/build-tooling",
         "//:node_modules/tslib",
-        "//devtools/tools/esbuild:esbuild_base",
-        "//devtools/tools/esbuild:esbuild_config_iife",
+        "//devtools/tools/esbuild:esbuild_base_rjs",
+        "//devtools/tools/esbuild:esbuild_config_iife_rjs",
     ],
-    config = "//devtools/tools/esbuild:esbuild_config_iife",
+    config = "//devtools/tools/esbuild:esbuild-iife.config.mjs",
     entry_point = "background.ts",
     format = "iife",
     minify = True,
@@ -289,12 +285,11 @@ esbuild(
 esbuild(
     name = "content_script_bundle",
     srcs = [
-        "//:node_modules/@angular/build-tooling",
         "//:node_modules/tslib",
-        "//devtools/tools/esbuild:esbuild_base",
-        "//devtools/tools/esbuild:esbuild_config_iife",
+        "//devtools/tools/esbuild:esbuild_base_rjs",
+        "//devtools/tools/esbuild:esbuild_config_iife_rjs",
     ],
-    config = "//devtools/tools/esbuild:esbuild_config_iife",
+    config = "//devtools/tools/esbuild:esbuild-iife.config.mjs",
     entry_point = "content-script.ts",
     format = "iife",
     minify = True,

devtools/src/BUILD.bazel

@@ -52,11 +52,10 @@ ng_project(
 esbuild(
     name = "bundle",
     srcs = [
-        "//:node_modules/@angular/build-tooling",
-        "//devtools/tools/esbuild:esbuild_base",
-        "//devtools/tools/esbuild:esbuild_config_esm",
+        "//devtools/tools/esbuild:esbuild_base_rjs",
+        "//devtools/tools/esbuild:esbuild_config_esm_rjs",
     ],
-    config = "//devtools/tools/esbuild:esbuild_config_esm",
+    config = "//devtools/tools/esbuild:esbuild-esm.config.mjs",
     entry_points = [":main.ts"],
     platform = "browser",
     splitting = True,

devtools/tools/angular-optimization/BUILD.bazel

@@ -0,0 +1,26 @@
+load("@aspect_bazel_lib//lib:copy_to_bin.bzl", "copy_to_bin")
+load("@aspect_rules_js//js:defs.bzl", "js_library")
+
+package(default_visibility = ["//visibility:public"])
+
+# Exposed `js_library` targets need to copy files to `bazel-out`. More details here:
+# https://github.com/bazelbuild/rules_nodejs/pull/3083.
+copy_to_bin(
+    name = "js_lib_files",
+    srcs = [
+        "ensure-no-linker-decl.mjs",
+        "esbuild-plugin.d.ts",
+        "esbuild-plugin.mjs",
+    ],
+)
+
+js_library(
+    name = "js_lib",
+    srcs = [":js_lib_files"],
+    deps = [
+        "//:node_modules/@angular/build",
+        "//:node_modules/@babel/core",
+        "//:node_modules/@babel/plugin-transform-async-generator-functions",
+        "//packages/compiler-cli:compiler-cli_rjs",
+    ],
+)

devtools/tools/angular-optimization/ensure-no-linker-decl.mjs

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright Google LLC
+ *
+ * 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
+ */
+
+/** Naively checks whether this node path resolves to an Angular declare invocation. */
+function isNgDeclareCallExpression(nodePath) {
+  if (!nodePath.node.name.startsWith('ɵɵngDeclare')) {
+    return false;
+  }
+
+  // Expect the `ngDeclare` identifier to be used as part of a property access that
+  // is invoked within a call expression. e.g. `i0.ɵɵngDeclare<>`.
+  return (
+    nodePath.parentPath?.type === 'MemberExpression' &&
+    nodePath.parentPath.parentPath?.type === 'CallExpression'
+  );
+}
+
+/** Asserts that the given AST does not contain any Angular partial declaration. */
+export async function assertNoPartialDeclaration(filePath, ast, traverseFn) {
+  // Naively check if there are any Angular declarations left that haven't been linked.
+  traverseFn(ast, {
+    Identifier: (astPath) => {
+      if (isNgDeclareCallExpression(astPath)) {
+        throw astPath.buildCodeFrameError(
+          `Found Angular declaration that has not been linked. ${filePath}`,
+          Error,
+        );
+      }
+    },
+  });
+}

devtools/tools/angular-optimization/esbuild-plugin.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright Google LLC
+ *
+ * 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
+ */
+
+import {PluginItem} from '@babel/core';
+
+export interface OptimizationOptions {
+  enableLinker?: {
+    ensureNoPartialDeclaration: boolean;
+    filterPaths?: RegExp;
+    linkerOptions?: object;
+  };
+  optimize?: {
+    isSideEffectFree?: (absoluteDiskPath: string) => boolean;
+  };
+  downlevelAsyncGeneratorsIfPresent?: boolean;
+}
+
+export function createEsbuildAngularOptimizePlugin(opts: OptimizationOptions, additionalBabelPlugins?: PluginItem[]): Promise<any>

devtools/tools/angular-optimization/esbuild-plugin.mjs

@@ -0,0 +1,119 @@
+/**
+ * @license
+ * Copyright Google LLC
+ *
+ * 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
+ */
+
+import fs from 'fs';
+import babel from '@babel/core';
+
+import {assertNoPartialDeclaration} from './ensure-no-linker-decl.mjs';
+
+/**
+ * Creates an ESBuild plugin that configures various Angular optimization Babel plugins.
+ * The Babel plugins configured usually run in the Angular CLI compilation pipeline.
+ *
+ * @param {import('./esbuild-plugin').OptimizationOptions} opts Options
+ * @param additionalBabelPlugins List of additional Babel plugins that should run as part
+ *   of this ESBuild plugin. This is primarily supported for reducing the amount of ESBuild
+ *   load plugins needed (as they can impact performance significantly).
+ */
+export async function createEsbuildAngularOptimizePlugin(opts, additionalBabelPlugins = []) {
+  let linkerCreator = {
+    compiler: null,
+    babel: null,
+  };
+  let downlevelAsyncGeneratorPlugin = null;
+
+  if (opts.enableLinker) {
+    linkerCreator = {
+      compiler: await import('@angular/compiler-cli'),
+      babel: await import('@angular/compiler-cli/linker/babel'),
+    };
+  }
+
+  if (opts.downlevelAsyncGeneratorsIfPresent) {
+    downlevelAsyncGeneratorPlugin = (
+      await import('@babel/plugin-transform-async-generator-functions')
+    ).default.default;
+  }
+
+  const {adjustStaticMembers, adjustTypeScriptEnums, elideAngularMetadata, markTopLevelPure} = (
+    await import('@angular/build/private')
+  ).default;
+
+  return {
+    name: 'ng-babel-optimize-esbuild',
+    setup: (build) => {
+      build.onLoad({filter: /\.[cm]?js$/}, async (args) => {
+        const filePath = args.path;
+        const content = await fs.promises.readFile(filePath, 'utf8');
+        const plugins = [...additionalBabelPlugins];
+
+        if (opts.optimize) {
+          plugins.push(adjustStaticMembers, adjustTypeScriptEnums, elideAngularMetadata);
+
+          // If the current file is denoted as explicit side effect free, add the pure
+          // top-level functions optimization plugin for this file.
+          if (opts.optimize.isSideEffectFree && opts.optimize.isSideEffectFree(args.path)) {
+            plugins.push(markTopLevelPure);
+          }
+        }
+
+        const shouldRunLinker =
+          opts.enableLinker &&
+          (opts.enableLinker.filterPaths == null || opts.enableLinker.filterPaths.test(args.path));
+
+        if (shouldRunLinker) {
+          plugins.push(
+            linkerCreator.babel.createEs2015LinkerPlugin({
+              ...(opts.enableLinker.linkerOptions ?? {}),
+              fileSystem: new linkerCreator.compiler.NodeJSFileSystem(),
+              logger: new linkerCreator.compiler.ConsoleLogger(
+                linkerCreator.compiler.LogLevel.warn,
+              ),
+              // Workaround for https://github.com/angular/angular/issues/42769 and https://github.com/angular/angular-cli/issues/22647.
+              sourceMapping: false,
+            }),
+          );
+        }
+
+        // Matches Angular CLIs detection:
+        // https://github.com/angular/angular-cli/blob/afe9feaa45913cbebe7f22c678d693d96f38584a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/javascript-transformer.ts#L74-L76
+        if (
+          opts.downlevelAsyncGeneratorsIfPresent &&
+          content.includes('async') &&
+          /async(\s+function)?\s*\*/.test(content)
+        ) {
+          plugins.push(downlevelAsyncGeneratorPlugin);
+        }
+
+        // If no plugins are enabled, return the original code and save time.
+        if (plugins.length === 0) {
+          return {contents: content};
+        }
+
+        const ensureNoPartialDeclaration =
+          opts.enableLinker && opts.enableLinker.ensureNoPartialDeclaration;
+        const {code, ast} = await babel.transformAsync(content, {
+          filename: filePath,
+          filenameRelative: filePath,
+          plugins: plugins,
+          // Sourcemaps are generated inline so that ESBuild can process them.
+          sourceMaps: 'inline',
+          compact: false,
+          // AST is needed when we want to ensure no partial declarations later.
+          ast: ensureNoPartialDeclaration,
+        });
+
+        if (ensureNoPartialDeclaration) {
+          assertNoPartialDeclaration(filePath, ast, babel.traverse);
+        }
+
+        return {contents: code};
+      });
+    },
+  };
+}

devtools/tools/esbuild/BUILD.bazel

@@ -1,50 +1,47 @@
-load("@aspect_rules_js//js:defs.bzl", "js_library")
-load("//tools:defaults.bzl", "esbuild_config")
+load("//devtools/tools:typescript.bzl", "ts_project")
 
 package(default_visibility = ["//visibility:public"])
 
-js_library(
+ts_project(
     name = "esbuild_base",
-    srcs = ["esbuild-base.config.mjs"],
-    data = [
+    srcs = ["esbuild-base.config.mts"],
+    deps = [
+        "//:node_modules/@angular/compiler-cli",
+        "//devtools/tools/angular-optimization:js_lib",
         "//packages:package_json",
     ],
-    deps = [
-        "//:node_modules/@angular/build-tooling",
-        "//:node_modules/@angular/compiler-cli",
-    ],
 )
 
-esbuild_config(
+ts_project(
     name = "esbuild_config_esm",
-    config_file = "esbuild-esm.config.mjs",
+    srcs = ["esbuild-esm.config.mts"],
     deps = [
-        ":esbuild_base",
-        "@npm//@angular/build-tooling/shared-scripts/angular-optimization:js_lib",
+        ":esbuild_base_rjs",
+        "//devtools/tools/angular-optimization:js_lib",
     ],
 )
 
-esbuild_config(
+ts_project(
     name = "esbuild_config_esm_prod",
-    config_file = "esbuild-esm-prod.config.mjs",
+    srcs = ["esbuild-esm-prod.config.mts"],
     deps = [
-        ":esbuild_base",
+        ":esbuild_base_rjs",
     ],
 )
 
-esbuild_config(
+ts_project(
     name = "esbuild_config_iife",
-    config_file = "esbuild-iife.config.mjs",
+    srcs = ["esbuild-iife.config.mts"],
     deps = [
-        ":esbuild_base",
+        ":esbuild_base_rjs",
     ],
 )
 
-esbuild_config(
+ts_project(
     name = "esbuild_config_spec",
     testonly = True,
-    config_file = "esbuild-spec.config.mjs",
+    srcs = ["esbuild-spec.config.mts"],
     deps = [
-        ":esbuild_base",
+        ":esbuild_base_rjs",
     ],
 )

devtools/tools/esbuild/esbuild-base.config.mts

@@ -6,18 +6,28 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {createEsbuildAngularOptimizePlugin} from '@angular/build-tooling/shared-scripts/angular-optimization/esbuild-plugin.mjs';
+// @ts-ignore
+import {createEsbuildAngularOptimizePlugin} from '../angular-optimization/esbuild-plugin.mjs';
 import {GLOBAL_DEFS_FOR_TERSER_WITH_AOT} from '@angular/compiler-cli/private/tooling';
 
 /** Converts an object to a string dictionary. */
-function convertObjectToStringDictionary(value) {
-  return Object.entries(value).reduce((result, [propName, value]) => {
-    result[propName] = String(value);
-    return result;
-  }, {});
+function convertObjectToStringDictionary(value: {[key: string]: any}) {
+  return Object.entries(value).reduce(
+    (result, [propName, value]) => {
+      result[propName] = String(value);
+      return result;
+    },
+    {} as {[key: string]: string},
+  );
 }
 
-export default async function createConfig({enableLinker, optimize}) {
+export default async function createConfig({
+  enableLinker,
+  optimize,
+}: {
+  enableLinker: boolean;
+  optimize: boolean;
+}) {
   return {
     resolveExtensions: ['.mjs', '.js'],
     // This ensures that we prioritize ES2020. RxJS would otherwise use the ESM5 output.
@@ -32,7 +42,7 @@ export default async function createConfig({enableLinker, optimize}) {
     plugins: [
       await createEsbuildAngularOptimizePlugin({
         optimize: {
-          isSideEffectFree: null,
+          isSideEffectFree: undefined,
         },
         downlevelAsyncGeneratorsIfPresent: true,
         enableLinker: enableLinker

package.json

@@ -64,7 +64,6 @@
     "@babel/generator": "7.28.0",
     "@bazel/concatjs": "5.8.1",
     "@bazel/esbuild": "5.8.1",
-    "esbuild": "0.25.5",
     "@bazel/jasmine": "5.8.1",
     "@bazel/protractor": "5.8.1",
     "@bazel/rollup": "5.8.1",
@@ -111,6 +110,7 @@
     "dagre-d3-es": "^7.0.11",
     "diff": "^8.0.0",
     "domino": "https://github.com/angular/domino.git#93e720f143d0296dd2726ffbcf4fc12283363a7b",
+    "esbuild": "0.25.5",
     "hammerjs": "~2.0.8",
     "http-server": "^14.0.0",
     "jasmine": "~5.8.0",
@@ -164,6 +164,7 @@
     "@angular/build-tooling": "https://github.com/angular/dev-infra-private-build-tooling-builds.git#d6f2b1159c52268160c02e701b80646e8f311257",
     "@angular/ng-dev": "https://github.com/angular/dev-infra-private-ng-dev-builds.git#800f6e7be48e84780621f8f7e9eec79a865346fd",
     "@babel/plugin-proposal-async-generator-functions": "7.20.7",
+    "@babel/plugin-transform-async-generator-functions": "^7.27.1",
     "@bazel/bazelisk": "^1.7.5",
     "@bazel/buildifier": "^8.0.0",
     "@bazel/ibazel": "0.25.0",

packages/compiler/BUILD.bazel

@@ -35,13 +35,13 @@ ng_package(
     # Dependencies on the full npm_package cause long re-builds.
     visibility = [
         "//adev:__pkg__",
+        "//devtools/tools/angular-optimization:__subpackages__",
         "//integration:__subpackages__",
         "//modules/ssr-benchmarks:__subpackages__",
         "//packages/compiler-cli/integrationtest:__pkg__",
         "//packages/core/test/bundling:__subpackages__",
         "//packages/core/test/playground/zone-signal-input:__pkg__",
         "//packages/language-service/test:__pkg__",
-        "@npm//@angular/build-tooling/shared-scripts:__subpackages__",
     ],
     deps = [
         ":compiler_rjs",