build: convert release package build scripts to typescript (#46456)

Follow-up to: cce395a.

PR Close #46456

.bazelrc

@@ -53,8 +53,8 @@ build:release --workspace_status_command="yarn -s ng-dev release build-env-stamp
 build:release --stamp
 
 # Snapshots should also be stamped with version control information.
-build:snapshot --workspace_status_command="yarn -s ng-dev release build-env-stamp --mode=snapshot"
-build:snapshot --stamp
+build:snapshot-build --workspace_status_command="yarn -s ng-dev release build-env-stamp --mode=snapshot"
+build:snapshot-build --stamp
 
 ###############################
 # Output                      #

.circleci/config.yml

@@ -442,7 +442,7 @@ jobs:
     steps:
       - custom_attach_workspace
       - init_environment
-      - run: node scripts/build/build-packages-dist.js
+      - run: yarn build
 
       # Save the npm packages from //packages/... for other workflow jobs to read
       - persist_to_workspace:

.ng-dev/release.mts

@@ -1,5 +1,4 @@
 import {ReleaseConfig} from '@angular/dev-infra-private/ng-dev';
-import {join} from 'path';
 
 /** Configuration for the `ng-dev release` command. */
 export const release: ReleaseConfig = {
@@ -24,12 +23,10 @@ export const release: ReleaseConfig = {
     {name: '@angular/upgrade'},
   ],
   buildPackages: async () => {
-    // The buildTargetPackages function is loaded at runtime as the loading the script causes an
-    // invocation of bazel.
-    const packageBuilder = await import('../scripts/build/package-builder.js');
-
-    return packageBuilder.default.buildTargetPackages(
-      'dist/release-output', 'Release', /* isRelease */ true);
+    // The buildTargetPackages function is loaded at runtime as the loading the script
+    // causes an invocation of Bazel.
+    const {performNpmReleaseBuild} = await import('../scripts/build/package-builder.mjs');
+    return performNpmReleaseBuild();
   },
   releaseNotes: {
     hiddenScopes: ['aio', 'bazel', 'dev-infra', 'docs-infra', 'zone.js', 'devtools'],

aio/tools/ng-packages-installer/index.js

@@ -16,8 +16,7 @@ const ANGULAR_ROOT_DIR = path.resolve(__dirname, '../../..');
 const ANGULAR_DIST_PACKAGES_DIR = path.join(ANGULAR_ROOT_DIR, 'dist/packages-dist');
 const AIMWA_DIST_PACKAGES_DIR = path.join(ANGULAR_ROOT_DIR, 'dist/angular-in-memory-web-api-dist');
 const ZONEJS_DIST_PACKAGES_DIR = path.join(ANGULAR_ROOT_DIR, 'dist/zone.js-dist');
-const DIST_PACKAGES_BUILD_SCRIPT = path.join(ANGULAR_ROOT_DIR, 'scripts/build/build-packages-dist.js');
-const DIST_PACKAGES_BUILD_CMD = `"${process.execPath}" "${DIST_PACKAGES_BUILD_SCRIPT}"`;
+const DIST_PACKAGES_BUILD_CMD = 'yarn -s build';
 
 /**
  * A tool that can install Angular/Zone.js dependencies for a project from NPM or from the
@@ -181,14 +180,14 @@ class NgPackagesInstaller {
     const canBuild = process.platform !== 'win32';
 
     if (canBuild) {
-      this._log(`Building the local packages with: ${DIST_PACKAGES_BUILD_SCRIPT}`);
-      shelljs.exec(DIST_PACKAGES_BUILD_CMD);
+      this._log(`Building the local packages with: ${DIST_PACKAGES_BUILD_CMD} in ${ANGULAR_ROOT_DIR}`);
+      shelljs.exec(DIST_PACKAGES_BUILD_CMD, {cwd: ANGULAR_ROOT_DIR});
     } else {
       this._warn([
         'Automatically building the local Angular/angular-in-memory-web-api/zone.js packages is currently not ' +
           'supported on Windows.',
         `Please, ensure '${ANGULAR_DIST_PACKAGES_DIR}', '${AIMWA_DIST_PACKAGES_DIR}' and ` +
-          `'${ZONEJS_DIST_PACKAGES_DIR}' exist and are up-to-date (e.g. by running '${DIST_PACKAGES_BUILD_SCRIPT}' ` +
+          `'${ZONEJS_DIST_PACKAGES_DIR}' exist and are up-to-date (e.g. by running "${DIST_PACKAGES_BUILD_CMD}" ` +
           'in Git Bash for Windows, Windows Subsystem for Linux or a Linux docker container or VM).',
         '',
         'Proceeding anyway...',

aio/tools/ng-packages-installer/index.spec.js

@@ -305,25 +305,20 @@ describe('NgPackagesInstaller', () => {
     };
 
     it('should build the local packages, when not on Windows', () => {
-      const buildScript = path.join(ngRootDir, 'scripts/build/build-packages-dist.js');
-      const buildCmd = `"${process.execPath}" "${buildScript}"`;
+      const buildCmd = 'yarn -s build';
 
       buildDistPackagesOnPlatform('linux');
-      expect(shelljs.exec).toHaveBeenCalledWith(buildCmd);
+      expect(shelljs.exec).toHaveBeenCalledWith(buildCmd, {cwd: ngRootDir});
 
       shelljs.exec.calls.reset();
 
       buildDistPackagesOnPlatform('darwin');
-      expect(shelljs.exec).toHaveBeenCalledWith(buildCmd);
+      expect(shelljs.exec).toHaveBeenCalledWith(buildCmd, {cwd: ngRootDir});
 
       shelljs.exec.calls.reset();
 
       buildDistPackagesOnPlatform('anythingButWindows :(');
-      expect(shelljs.exec).toHaveBeenCalledWith(buildCmd);
-
-      // Ensure that the script does actually exist (e.g. it was not renamed/moved).
-      fs.existsSync.and.callThrough();
-      expect(fs.existsSync(buildScript)).toBe(true);
+      expect(shelljs.exec).toHaveBeenCalledWith(buildCmd, {cwd: ngRootDir});
     });
 
     it('should print a warning, when on Windows', () => {

devtools/src/BUILD.bazel

@@ -271,7 +271,7 @@ pkg_web(
         "@npm//:node_modules/tslib/tslib.js",
     ],
     # Currently, ibazel doesn't allow passing in flags to bazel run.
-    # This means we are not able to use --config snapshot
+    # This means we are not able to use --config snapshot-build
     # to access the current commit SHA.
     # Since we still want to be able to use ibazel to speed up
     # local development, we supply an empty string for the SHA substitution.

docs/BAZEL.md

@@ -297,7 +297,7 @@ The `msys64` library and associated tools (like `mkdir`) are required to build A
 
 Make sure you have `C:\msys64\usr\bin` in the "system" `PATH` rather than the "user" `PATH`.
 
-After that, a `git clean -xfd`, `yarn`, and `node scripts\build\build-packages-dist.js` should resolve this issue.
+After that, a `git clean -xfd`, `yarn`, and `yarn build` should resolve this issue.
 
 ### Xcode
 

docs/DEBUG_COMPONENTS_REPO_IVY.md

@@ -4,8 +4,7 @@ Currently all changes to Ivy are validated against the test suite of the
 `angular/components` repository. In order to debug the `components-repo-unit-tests` CI
 job, the following steps can be used:
 
-1\) Build the Ivy package output by running `node ./scripts/build/build-packages-dist.js` in
-the `angular/angular` repo.
+1\) Build the Ivy package output by running `yarn build` in the `angular/angular` repo.
 
 2\) Clone the `angular/components` repository if not done yet ([quick link to repo](https://github.com/angular/components)).
 

docs/DEVELOPER.md

@@ -67,7 +67,7 @@ yarn install
 To build Angular run:
 
 ```shell
-node ./scripts/build/build-packages-dist.js
+yarn build
 ```
 
 * Results are put in the `dist/packages-dist` folder.
@@ -197,7 +197,7 @@ c. Some package managers (such as `pnpm` or `yarn pnp`) might not work correctly
 ### Publishing to GitHub Repos
 You can also manually publish `*-builds` snapshots just like our CircleCI build does for upstream
 builds. Before being able to publish the packages, you need to build them locally by running the
-`./scripts/build/build-packages-dist.js` script.
+`yarn build` command.
 
 First time, you need to create the GitHub repositories:
 

integration/README.md

@@ -4,7 +4,7 @@ This directory contains end-to-end tests for Angular. Each directory is a self-c
 that exactly mimics how a user might expect Angular to work, so they allow high-fidelity
 reproductions of real-world issues.
 
-For this to work, we first build the Angular distribution via `./scripts/build/build-packages-dist.js`, then
+For this to work, we first build the Angular distribution via `yarn build`, then
 install the distribution into each app.
 
 To test Angular CLI applications, we use the `cli-hello-world-*` integration tests.

integration/cli-hello-world-ivy-compat/debug-test.sh

@@ -11,7 +11,8 @@ set -u -e -o pipefail
 
 cd "$(dirname "$0")"
 
-node $(pwd)/../../scripts/build/build-packages-dist.js
+# Go to the project directory and build the release packages.
+(cd $(pwd)/../../ && yarn build)
 
 # Workaround https://github.com/yarnpkg/yarn/issues/2165
 # Yarn will cache file://dist URIs and not update Angular code

integration/cli-hello-world-ivy-minimal/debug-test.sh

@@ -11,7 +11,8 @@ set -u -e -o pipefail
 
 cd "$(dirname "$0")"
 
-node $(pwd)/../../scripts/build/build-packages-dist.js
+# Go to the project directory and build the release packages.
+(cd $(pwd)/../../ && yarn build)
 
 # Workaround https://github.com/yarnpkg/yarn/issues/2165
 # Yarn will cache file://dist URIs and not update Angular code

integration/ivy-i18n/debug-test.sh

@@ -11,7 +11,8 @@ set -u -e -o pipefail
 
 cd "$(dirname "$0")"
 
-node $(pwd)/../../scripts/build/build-packages-dist.js
+# Go to the project directory and build the release packages.
+(cd $(pwd)/../../ && yarn build)
 
 # Workaround https://github.com/yarnpkg/yarn/issues/2165
 # Yarn will cache file://dist URIs and not update Angular code

integration/ngcc/debug-test.sh

@@ -11,7 +11,8 @@ set -u -e -o pipefail
 
 cd "$(dirname "$0")"
 
-node $(pwd)/../../scripts/build/build-packages-dist.js
+# Go to the project directory and build the release packages.
+(cd $(pwd)/../../ && yarn build)
 
 # Workaround https://github.com/yarnpkg/yarn/issues/2165
 # Yarn will cache file://dist URIs and not update Angular code

integration/run_tests.sh

@@ -20,7 +20,7 @@ echo ${RUN_TESTS}
 
 # Build the packages-dist directory.
 # This should be fast on incremental re-build.
-node ../scripts/build/build-packages-dist.js
+yarn build
 
 # Workaround https://github.com/yarnpkg/yarn/issues/2165
 # Yarn will cache file://dist URIs and not update Angular code

package.json

@@ -25,6 +25,7 @@
     "postinstall": "node scripts/webdriver-manager-update.js && node --preserve-symlinks --preserve-symlinks-main ./tools/postinstall-patches.js",
     "prepare": "husky install",
     "ng-dev": "ts-node --esm --project .ng-dev/tsconfig.json node_modules/@angular/dev-infra-private/ng-dev/bundles/cli.mjs",
+    "build": "ts-node --esm --project scripts/tsconfig.json scripts/build/build-packages-dist.mts",
     "test": "bazelisk test",
     "test:ci": "bazelisk test -- //... -//devtools/... -//aio/...",
     "test-tsec": "bazelisk test //... --build_tag_filters=tsec --test_tag_filters=tsec",
@@ -36,11 +37,11 @@
     "symbol-extractor:update": "node tools/symbol-extractor/run_all_symbols_extractor_tests.js accept",
     "ts-circular-deps:check": "yarn -s ng-dev ts-circular-deps check --config ./packages/circular-deps-test.conf.js",
     "ts-circular-deps:approve": "yarn -s ng-dev ts-circular-deps approve --config ./packages/circular-deps-test.conf.js",
-    "check-tooling-setup": "yarn tsc --project .ng-dev/tsconfig.json",
+    "check-tooling-setup": "yarn tsc --project .ng-dev/tsconfig.json && yarn tsc --project scripts/tsconfig.json",
     "devtools:devserver": "ibazel run //devtools/src:devserver",
-    "devtools:build:chrome": "bazelisk build --config snapshot --//devtools/projects/shell-browser/src:flag_browser=chrome -- devtools/projects/shell-browser/src:prodapp",
-    "devtools:build:firefox": "bazelisk build --config snapshot --//devtools/projects/shell-browser/src:flag_browser=firefox -- devtools/projects/shell-browser/src:prodapp",
-    "devtools:test": "bazelisk test --config snapshot --//devtools/projects/shell-browser/src:flag_browser=chrome -- //devtools/..."
+    "devtools:build:chrome": "bazelisk build --config snapshot-build --//devtools/projects/shell-browser/src:flag_browser=chrome -- devtools/projects/shell-browser/src:prodapp",
+    "devtools:build:firefox": "bazelisk build --config snapshot-build --//devtools/projects/shell-browser/src:flag_browser=firefox -- devtools/projects/shell-browser/src:prodapp",
+    "devtools:test": "bazelisk test --config snapshot-build --//devtools/projects/shell-browser/src:flag_browser=chrome -- //devtools/..."
   },
   "// 1": "dependencies are used locally and by bazel",
   "dependencies": {

scripts/build/angular-in-memory-web-api.mts

@@ -0,0 +1,50 @@
+/**
+ * @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
+ */
+
+import {join} from 'path';
+import sh from 'shelljs';
+
+import {projectDir, bazelCmd, exec} from './package-builder.mjs';
+
+/**
+ * Build the `angular-in-memory-web-api` npm package and copies it into the release
+ * distribution directory.
+ *
+ * NOTE: The `angular-in-memory-web-api` package is not built as part of `package-builder`'s
+ *       `buildTargetPackages()` nor is it copied into the same directory as the Angular packages (e.g.
+ *       `dist/packages-dist/`) despite its source's being inside `packages/`, because it is not
+ *       published to npm under the `@angular` scope (as happens for the rest of the packages).
+ *
+ * @param {string} destDir Path to the output directory into which we copy the npm package.
+ *     This path should either be absolute or relative to the project root.
+ */
+export function buildAngularInMemoryWebApiPackage(destDir: string): void {
+  console.info('##############################');
+  console.info('  Building angular-in-memory-web-api npm package');
+  console.info('##############################');
+
+  exec(`${bazelCmd} build //packages/misc/angular-in-memory-web-api:npm_package`);
+
+  // Create the output directory.
+  if (!sh.test('-d', destDir)) {
+    sh.mkdir('-p', destDir);
+  }
+
+  const bazelBinPath = exec(`${bazelCmd} info bazel-bin`, true);
+
+  // Copy artifacts to `destDir`, so they can be easier persisted on CI and used by non-bazel
+  // scripts/tests.
+  const buildOutputDir = join(bazelBinPath, 'packages/misc/angular-in-memory-web-api/npm_package');
+  const distTargetDir = join(destDir, 'angular-in-memory-web-api');
+
+  console.info(`# Copy npm_package artifacts to ${distTargetDir}`);
+
+  sh.rm('-rf', distTargetDir);
+  sh.cp('-R', buildOutputDir, distTargetDir);
+  sh.chmod('-R', 'u+w', distTargetDir);
+}

scripts/build/build-packages-dist.js → scripts/build/build-packages-dist.mts

@@ -1,4 +1,5 @@
 #!/usr/bin/env node
+
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -7,15 +8,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-'use strict';
-
-const {buildAngularInMemoryWebApiPackage} = require('./angular-in-memory-web-api');
-const {buildTargetPackages} = require('./package-builder');
-const {buildZoneJsPackage} = require('./zone-js-builder');
+import {buildAngularInMemoryWebApiPackage} from './angular-in-memory-web-api.mjs';
+import {performDefaultSnapshotBuild} from './package-builder.mjs';
+import {buildZoneJsPackage} from './zone-js-builder.mjs';
 
 
 // Build the legacy (view engine) npm packages into `dist/packages-dist/`.
-buildTargetPackages('dist/packages-dist', 'Production');
+performDefaultSnapshotBuild();
 
 // Build the `angular-in-memory-web-api` npm package into `dist/angular-in-memory-web-api-dist/`,
 // because it might be needed by other scripts/targets.