build(docs-infra): use local version of Zone.js when testing against local packages (#35858)

In some cases, we want to test the AIO app or docs examples against the
locally built Angular packages (for example to ensure that the changes
in a commit do not introduce a breaking change). In order to achieve
this, we have the `ng-packages-installer` script that handles updating
a project's `package.json` file to use the locally built Angular
packages (and appropriate versions for their (dev-/peer-)dependencies).

Previously, `ng-packages-installer` would only consider the locally
built Angular packages (from `dist/packages-dist/`). However, given that
Zone.js is now part of the `angular/angular` repo, it makes sense to
also use the locally built Zone.js package (from `dist/zone.js-dist/`).
Otherwise, the tests might fail for commits that update both the Angular
packages (and related docs examples) and the Zone.js package. An example
of such a simultaneous change (that would have broken tests) is #33838.

This commit updates the script to install the locally built Zone.js
package (in addition to the Angular ones). The commit ensures that the
Zone.js package will always be available alongside the Angular packages
(i.e. that the Zone.js package will be built by the same script that
builds the Angular packages and that the `dist/zone.js-dist/` directory
will be cached on CI).

Note: This problem was discovered while enabling docs examples unit
tests in #34374.

PR Close #35858

scripts/build/build-ivy-npm-packages.js

@@ -9,8 +9,18 @@
 
 'use strict';
 
+const {buildZoneJsPackage} = require('./zone-js-builder');
 const {buildTargetPackages} = require('./package-builder');
 
 
 // Build the ivy packages into `dist/packages-dist-ivy-aot/`.
 buildTargetPackages('dist/packages-dist-ivy-aot', true, 'Ivy AOT');
+
+// Build the `zone.js` npm package into `dist/zone.js-dist-ivy-aot/`, because it might be needed by
+// other scripts/tests.
+//
+// NOTE:
+// The `-ivy-aot` suffix is only used to differentiate from the packages built by the
+// `build-packages-dist.js` script, so that there is no conflict when persisting them to the
+// workspace on CI.
+buildZoneJsPackage('dist/zone.js-dist-ivy-aot');

scripts/build/build-packages-dist.js

@@ -19,7 +19,7 @@ buildTargetPackages('dist/packages-dist', false, 'Production');
 
 // Build the `zone.js` npm package into `dist/zone.js-dist/`, because it might be needed by other
 // scripts/tests.
-buildZoneJsPackage();
+buildZoneJsPackage('dist/zone.js-dist');
 
 // Build the `angular-dev-infra` npm package into `dist/packages-dist/@angular/dev-infra-private`
 buildDevInfraPackage();

scripts/build/package-builder.js

@@ -51,7 +51,7 @@ module.exports = {
 };
 
 /**
- * Build the packages.
+ * Build the Angular packages.
  *
  * @param {string} destPath Path to the output directory into which we copy the npm packages.
  * This path should either be absolute or relative to the project root.

scripts/build/zone-js-builder.js

@@ -8,7 +8,8 @@
 
 'use strict';
 
-const {chmod, cp, mkdir, rm} = require('shelljs');
+const {resolve} = require('path');
+const {chmod, cp, mkdir, rm, test} = require('shelljs');
 const {baseDir, bazelBin, bazelCmd, exec, scriptPath} = require('./package-builder');
 
 
@@ -18,27 +19,33 @@ module.exports = {
 
 /**
  * Build the `zone.js` npm package into `dist/bin/packages/zone.js/npm_package/` and copy it to
- * `dist/zone.js-dist/` for other scripts/tests to use.
+ * `destPath` for other scripts/tests to use.
  *
  * NOTE: The `zone.js` 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} destPath Path to the output directory into which we copy the npm package.
+ *     This path should either be absolute or relative to the project root.
  */
-function buildZoneJsPackage() {
+function buildZoneJsPackage(destPath) {
   console.info('##############################');
   console.info(`${scriptPath}:`);
   console.info('  Building zone.js npm package');
   console.info('##############################');
   exec(`${bazelCmd} build //packages/zone.js:npm_package`);
 
-  // Copy artifacts to `dist/zone.js-dist/`, so they can be easier persisted on CI and used by
-  // non-bazel scripts/tests.
+  // Create the output directory.
+  const absDestPath = resolve(baseDir, destPath);
+  if (!test('-d', absDestPath)) mkdir('-p', absDestPath);
+
+  // Copy artifacts to `destPath`, so they can be easier persisted on CI and used by non-bazel
+  // scripts/tests.
   const buildOutputDir = `${bazelBin}/packages/zone.js/npm_package`;
-  const distTargetDir = `${baseDir}/dist/zone.js-dist/zone.js`;
+  const distTargetDir = `${absDestPath}/zone.js`;
 
   console.info(`# Copy artifacts to ${distTargetDir}`);
-  mkdir('-p', distTargetDir);
   rm('-rf', distTargetDir);
   cp('-R', buildOutputDir, distTargetDir);
   chmod('-R', 'u+w', distTargetDir);