build: migrate build_angular to ts_project

This commit updates `build_angular` to the `rules_js` ts_project rule.

Notably a few real type issues surfaced but previously didn't surface
due to some unknown resolution issues that resulted in `never` types;
where every possible value was assignable; so this change improves type
safety and a TODO was left for the "brittle code fragment".

Author: devversion

.aspect/rules/external_repository_action_cache/npm_translate_lock_MzA5NzUwNzMx

@@ -2,7 +2,7 @@
 # Input hashes for repository rule npm_translate_lock(name = "npm2", pnpm_lock = "@//:pnpm-lock.yaml").
 # This file should be checked into version control along with the pnpm-lock.yaml file.
 .npmrc=-2023857461
-package.json=-617490503
-pnpm-lock.yaml=633266779
+package.json=-851944395
+pnpm-lock.yaml=-958480774
 pnpm-workspace.yaml=1711114604
-yarn.lock=-291473705
+yarn.lock=481913197

package.json

@@ -84,6 +84,7 @@
     "@rollup/plugin-node-resolve": "^13.0.5",
     "@stylistic/eslint-plugin": "^2.8.0",
     "@types/babel__core": "7.20.5",
+    "@types/babel__generator": "^7.6.8",
     "@types/browser-sync": "^2.27.0",
     "@types/express": "^4.16.0",
     "@types/http-proxy": "^1.17.4",

packages/angular_devkit/build_angular/BUILD.bazel

@@ -5,7 +5,7 @@
 
 load("@npm//@angular/build-tooling/bazel/api-golden:index.bzl", "api_golden_test_npm_package")
 load("@npm//@bazel/jasmine:index.bzl", "jasmine_node_test")
-load("//tools:defaults.bzl", "pkg_npm", "ts_library")
+load("//tools:defaults.bzl", "pkg_npm")
 load("//tools:interop.bzl", "ts_project")
 load("//tools:ts_json_schema.bzl", "ts_json_schema")
 
@@ -93,6 +93,7 @@ ts_project(
             "src/testing/**/*.ts",
         ],
     ) + [
+        "index.ts",
         "//packages/angular_devkit/build_angular:src/builders/app-shell/schema.ts",
         "//packages/angular_devkit/build_angular:src/builders/browser-esbuild/schema.ts",
         "//packages/angular_devkit/build_angular:src/builders/browser/schema.ts",
@@ -147,6 +148,7 @@ ts_project(
         "//:root_modules/@babel/runtime",
         "//:root_modules/@discoveryjs/json-ext",
         "//:root_modules/@types/babel__core",
+        "//:root_modules/@types/babel__generator",
         "//:root_modules/@types/browser-sync",
         "//:root_modules/@types/karma",
         "//:root_modules/@types/less",
@@ -203,7 +205,7 @@ ts_project(
     ],
 )
 
-ts_library(
+ts_project(
     name = "build_angular_test_lib",
     testonly = True,
     srcs = glob(
@@ -215,15 +217,17 @@ ts_library(
         ],
     ),
     data = glob(["test/**/*"]),
-    deps = [
-        ":build_angular",
-        ":build_angular_test_utils",
-        "//packages/angular_devkit/architect/testing",
+    interop_deps = [
         "//packages/angular_devkit/core",
-        "@npm//fast-glob",
-        "@npm//prettier",
-        "@npm//typescript",
-        "@npm//webpack",
+    ],
+    deps = [
+        ":build_angular_rjs",
+        ":build_angular_test_utils_rjs",
+        "//:root_modules/fast-glob",
+        "//:root_modules/prettier",
+        "//:root_modules/typescript",
+        "//:root_modules/webpack",
+        "//packages/angular_devkit/architect/testing:testing_rjs",
     ],
 )
 
@@ -268,7 +272,7 @@ api_golden_test_npm_package(
 
 # Large build_angular specs
 
-ts_library(
+ts_project(
     name = "build_angular_test_utils",
     testonly = True,
     srcs = glob(
@@ -281,17 +285,19 @@ ts_library(
         ],
     ),
     data = glob(["test/**/*"]),
-    tsconfig = "//:tsconfig-test.json",
-    deps = [
-        ":build_angular",
+    interop_deps = [
         "//modules/testing/builder",
         "//packages/angular/build",
         "//packages/angular/build:private",
-        "//packages/angular_devkit/architect",
-        "//packages/angular_devkit/architect/node",
-        "//packages/angular_devkit/architect/testing",
         "//packages/angular_devkit/core",
         "//packages/angular_devkit/core/node",
+    ],
+    deps = [
+        ":build_angular_rjs",
+        "//:root_modules/@types/jasmine",
+        "//packages/angular_devkit/architect:architect_rjs",
+        "//packages/angular_devkit/architect/node:node_rjs",
+        "//packages/angular_devkit/architect/testing:testing_rjs",
         "@npm//rxjs",
     ],
 )
@@ -302,12 +308,14 @@ LARGE_SPECS = {
         "shards": 10,
         "size": "large",
         "flaky": True,
-        "extra_deps": [
+        "extra_interop_deps": [
             "//packages/angular_devkit/build_webpack",
-            "@npm//@types/http-proxy",
-            "@npm//http-proxy",
-            "@npm//puppeteer",
-            "@npm//undici",
+        ],
+        "extra_deps": [
+            "//:root_modules/@types/http-proxy",
+            "//:root_modules/http-proxy",
+            "//:root_modules/puppeteer",
+            "//:root_modules/undici",
         ],
     },
     "extract-i18n": {},
@@ -316,21 +324,21 @@ LARGE_SPECS = {
         "size": "large",
         "flaky": True,
         "extra_deps": [
-            "@npm//karma",
-            "@npm//karma-chrome-launcher",
-            "@npm//karma-coverage",
-            "@npm//karma-jasmine",
-            "@npm//karma-jasmine-html-reporter",
-            "@npm//puppeteer",
-            "@npm//webpack",
+            "//:root_modules/karma",
+            "//:root_modules/karma-chrome-launcher",
+            "//:root_modules/karma-coverage",
+            "//:root_modules/karma-jasmine",
+            "//:root_modules/karma-jasmine-html-reporter",
+            "//:root_modules/puppeteer",
+            "//:root_modules/webpack",
         ],
     },
     "protractor": {
         "extra_deps": [
-            "@npm//jasmine-spec-reporter",
-            "@npm//protractor",
-            "@npm//puppeteer",
-            "@npm//ts-node",
+            "//:root_modules/jasmine-spec-reporter",
+            "//:root_modules/protractor",
+            "//:root_modules/puppeteer",
+            "//:root_modules/ts-node",
         ],
         # NB: does not run on rbe because webdriver manager uses an absolute path to chromedriver
         "tags": ["no-remote-exec"],
@@ -340,7 +348,7 @@ LARGE_SPECS = {
     "server": {
         "size": "large",
         "extra_deps": [
-            "@npm//@angular/animations",
+            "//:root_modules/@angular/animations",
         ],
     },
     "ng-packagr": {},
@@ -349,55 +357,60 @@ LARGE_SPECS = {
         "size": "large",
         "flaky": True,
         "extra_deps": [
-            "@npm//@angular/animations",
-            "@npm//@angular/material",
+            "//:root_modules/@angular/animations",
+            "//:root_modules/@angular/material",
         ],
     },
     "prerender": {},
     "browser-esbuild": {},
     "ssr-dev-server": {
-        "extra_deps": [
-            "@npm//@types/browser-sync",
-            "@npm//browser-sync",
-            "@npm//express",
-            "@npm//undici",
+        "extra_interop_deps": [
             "//packages/angular/ssr/node",
         ],
+        "extra_deps": [
+            "//:root_modules/@types/browser-sync",
+            "//:root_modules/browser-sync",
+            "//:root_modules/express",
+            "//:root_modules/undici",
+        ],
     },
 }
 
 [
-    ts_library(
+    ts_project(
         name = "build_angular_" + spec + "_test_lib",
         testonly = True,
         srcs = glob(["src/builders/" + spec + "/**/*_spec.ts"]),
-        tsconfig = "//:tsconfig-test.json",
-        deps = [
+        interop_deps = [
             # Dependencies needed to compile and run the specs themselves.
-            ":build_angular",
-            ":build_angular_test_utils",
+            "//packages/angular_devkit/core",
+            "//packages/angular_devkit/core/node",
             "//modules/testing/builder",
             "//packages/angular/build",
             "//packages/angular/build:private",
-            "//packages/angular_devkit/architect",
-            "//packages/angular_devkit/architect/node",
-            "//packages/angular_devkit/architect/testing",
-            "//packages/angular_devkit/core",
-            "//packages/angular_devkit/core/node",
+        ] + LARGE_SPECS[spec].get("extra_interop_deps", []),
+        deps = [
+            # Dependencies needed to compile and run the specs themselves.
+            ":build_angular_rjs",
+            ":build_angular_test_utils_rjs",
+            "//packages/angular_devkit/architect:architect_rjs",
+            "//packages/angular_devkit/architect/node:node_rjs",
+            "//packages/angular_devkit/architect/testing:testing_rjs",
 
             # Base dependencies for the application in hello-world-app.
             # Some tests also require extra dependencies.
-            "@npm//@angular/common",
-            "@npm//@angular/compiler",
-            "@npm//@angular/compiler-cli",
-            "@npm//@angular/core",
-            "@npm//@angular/platform-browser",
-            "@npm//@angular/platform-browser-dynamic",
-            "@npm//@angular/router",
-            "@npm//rxjs",
-            "@npm//tslib",
-            "@npm//typescript",
-            "@npm//zone.js",
+            "//:root_modules/@angular/common",
+            "//:root_modules/@angular/compiler",
+            "//:root_modules/@angular/compiler-cli",
+            "//:root_modules/@angular/core",
+            "//:root_modules/@angular/platform-browser",
+            "//:root_modules/@angular/platform-browser-dynamic",
+            "//:root_modules/@angular/router",
+            "//:root_modules/rxjs",
+            "//:root_modules/tslib",
+            "//:root_modules/typescript",
+            "//:root_modules/zone.js",
+            "//:root_modules/@types/jasmine",
         ] + LARGE_SPECS[spec].get("extra_deps", []),
     )
     for spec in LARGE_SPECS

packages/angular_devkit/build_angular/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @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.dev/license
+ */
+
+export * from './src/index';

packages/angular_devkit/build_angular/src/tools/webpack/plugins/postcss-cli-resources.ts

@@ -115,10 +115,16 @@ export default function (options?: PostcssCliResourcesOptions): Plugin {
           return;
         }
 
-        let outputPath = interpolateName({ resourcePath: result }, filename(result), {
-          content,
-          context: loader.context || loader.rootContext,
-        }).replace(/\\|\//g, '-');
+        let outputPath = interpolateName(
+          // TODO: Revisit. Previously due to lack of type safety, this object
+          // was fine, but in practice it doesn't match the type of the loader context.
+          { resourcePath: result } as Parameters<typeof interpolateName>[0],
+          filename(result),
+          {
+            content,
+            context: loader.context || loader.rootContext,
+          },
+        ).replace(/\\|\//g, '-');
 
         if (resourcesOutputPath) {
           outputPath = path.posix.join(resourcesOutputPath, outputPath);

packages/angular_devkit/build_angular/src/tools/webpack/plugins/scripts-webpack-plugin.ts

@@ -194,7 +194,9 @@ export class ScriptsWebpackPlugin {
           const asset = compilation.getAsset(assetName);
           if (asset) {
             const interpolatedFilename = interpolateName(
-              { resourcePath: 'scripts.js' },
+              // TODO: Revisit. Previously due to lack of type safety, this object
+              // was fine, but in practice it doesn't match the type of the loader context.
+              { resourcePath: 'scripts.js' } as Parameters<typeof interpolateName>[0],
               assetName,
               { content: asset.source.source() },
             );

pnpm-lock.yaml

@@ -26,6 +26,7 @@
       "@angular-devkit/schematics/testing": ["./packages/angular_devkit/schematics/testing/index"],
       "@angular-devkit/architect/*": ["./packages/angular_devkit/architect/*/index"],
       "@angular-devkit/build-webpack": ["./packages/angular_devkit/build_webpack"],
+      "@angular-devkit/build-angular": ["./packages/angular_devkit/build_angular"],
       "@angular-devkit/*": ["./packages/angular_devkit/*/src"],
       "@angular/ssr": ["./packages/angular/ssr"],
       "@angular/*": ["./packages/angular/*/src"],

tsconfig.json

@@ -351,6 +351,7 @@ __metadata:
     "@rollup/plugin-node-resolve": "npm:^13.0.5"
     "@stylistic/eslint-plugin": "npm:^2.8.0"
     "@types/babel__core": "npm:7.20.5"
+    "@types/babel__generator": "npm:^7.6.8"
     "@types/browser-sync": "npm:^2.27.0"
     "@types/express": "npm:^4.16.0"
     "@types/http-proxy": "npm:^1.17.4"
@@ -4180,7 +4181,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/babel__generator@npm:*":
+"@types/babel__generator@npm:*, @types/babel__generator@npm:^7.6.8":
   version: 7.6.8
   resolution: "@types/babel__generator@npm:7.6.8"
   dependencies: