build: fix build scripts on macOS (angular#33854)

In angular#33823, `scripts/package-builds.sh` (which is used by both
`build-packages-dist.sh` and `build-ivy-npm-packages.sh`) was updated to
use `realpath`. It turns out that `realpath` does not exist on macOS, so
the build scripts do not work there.

In order to fix this (and also reduce the likelihood of introducing
similar issues in the future), this commit changes these bash scripts to
Node.js scripts (using [ShellJS](https://github.com/shelljs/shelljs) for
a cross-platform implementation of Unix shell commands where necessary).

PR Close angular#33854

Author: gkalpak

.circleci/config.yml

@@ -502,7 +502,7 @@ jobs:
       - setup_circleci_bazel_config
       - setup_bazel_rbe
 
-      - run: scripts/build-packages-dist.sh
+      - run: node scripts/build-packages-dist.js
 
       # Save the npm packages from //packages/... for other workflow jobs to read
       - persist_to_workspace:
@@ -530,7 +530,7 @@ jobs:
       - setup_circleci_bazel_config
       - setup_bazel_rbe
 
-      - run: scripts/build-ivy-npm-packages.sh
+      - run: node scripts/build-ivy-npm-packages.js
 
       # Save the npm packages from //packages/... for other workflow jobs to read
       - persist_to_workspace:

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

@@ -15,7 +15,8 @@ const PACKAGE_JSON_REGEX = /^[^/]+\/package\.json$/;
 
 const ANGULAR_ROOT_DIR = path.resolve(__dirname, '../../..');
 const ANGULAR_DIST_PACKAGES = path.join(ANGULAR_ROOT_DIR, 'dist/packages-dist');
-const ANGULAR_DIST_PACKAGES_BUILD_CMD = path.join(ANGULAR_ROOT_DIR, 'scripts/build-packages-dist.sh');
+const ANGULAR_DIST_PACKAGES_BUILD_SCRIPT = path.join(ANGULAR_ROOT_DIR, 'scripts/build-packages-dist.js');
+const ANGULAR_DIST_PACKAGES_BUILD_CMD = `"${process.execPath}" "${ANGULAR_DIST_PACKAGES_BUILD_SCRIPT}"`;
 
 /**
  * A tool that can install Angular dependencies for a project from NPM or from the
@@ -173,13 +174,13 @@ class NgPackagesInstaller {
     const canBuild = process.platform !== 'win32';
 
     if (canBuild) {
-      this._log(`Building the Angular packages with: ${ANGULAR_DIST_PACKAGES_BUILD_CMD}`);
+      this._log(`Building the Angular packages with: ${ANGULAR_DIST_PACKAGES_BUILD_SCRIPT}`);
       shelljs.exec(ANGULAR_DIST_PACKAGES_BUILD_CMD);
     } else {
       this._warn([
         'Automatically building the local Angular packages is currently not supported on Windows.',
         `Please, ensure '${ANGULAR_DIST_PACKAGES}' exists and is up-to-date (e.g. by running ` +
-          `'${ANGULAR_DIST_PACKAGES_BUILD_CMD}' in Git Bash for Windows, Windows Subsystem for Linux or a Linux ` +
+          `'${ANGULAR_DIST_PACKAGES_BUILD_SCRIPT}' 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

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

docs/DEBUG_MATERIAL_IVY.md

@@ -4,7 +4,7 @@ Currently all changes to Ivy are validated against the test suite of the
 `angular/components` repository. In order to debug the `material-unit-tests` CI
 job, the following steps can be used:
 
-1\) Build the Ivy package output by running `./scripts/build-ivy-npm-packages.sh` in
+1\) Build the Ivy package output by running `node ./scripts/build-ivy-npm-packages.js` in
 the `angular/angular` repo.
 
 2\) Clone the `angular/components` repository if not done yet ([quick link to repo](https://github.com/angular/components)).
@@ -32,9 +32,9 @@ selecting a given test target.
 
 Here is an example of commands that run individual test targets. Note that it is
 **important** to specify the `--define=compile=aot` flag in order to run tests with Ivy.
-  
+
 ```bash
 yarn bazel test --define=compile=aot src/material/slider:unit_tests
 yarn bazel test --define=compile=aot src/cdk/a11y:unit_tests
 yarn bazel test --define=compile=aot src/material/toolbar:unit_tests
-``` 
+```

docs/DEVELOPER.md

@@ -69,7 +69,7 @@ yarn install
 To build Angular run:
 
 ```shell
-./scripts/build-packages-dist.sh
+node ./scripts/build-packages-dist.js
 ```
 
 * Results are put in the `dist/packages-dist` folder.
@@ -190,7 +190,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-packages-dist.sh` script.
+`./scripts/build-packages-dist.js` script.
 
 First time, you need to create the GitHub repositories:
 

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

@@ -11,7 +11,7 @@ set -u -e -o pipefail
 
 cd "$(dirname "$0")"
 
-$(pwd)/../../scripts/build-packages-dist.sh
+node $(pwd)/../../scripts/build-packages-dist.js
 
 # Workaround https://github.com/yarnpkg/yarn/issues/2165
 # Yarn will cache file://dist URIs and not update Angular code
@@ -26,4 +26,4 @@ trap rm_cache EXIT
 rm -rf dist
 rm -rf node_modules
 yarn install --cache-folder $cache
-yarn test
+yarn test

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

@@ -11,7 +11,7 @@ set -u -e -o pipefail
 
 cd "$(dirname "$0")"
 
-$(pwd)/../../scripts/build-packages-dist.sh
+node $(pwd)/../../scripts/build-packages-dist.js
 
 # Workaround https://github.com/yarnpkg/yarn/issues/2165
 # Yarn will cache file://dist URIs and not update Angular code
@@ -26,4 +26,4 @@ trap rm_cache EXIT
 rm -rf dist
 rm -rf node_modules
 yarn install --cache-folder $cache
-yarn test
+yarn test

integration/ivy-i18n/debug-test.sh

@@ -11,7 +11,7 @@ set -u -e -o pipefail
 
 cd "$(dirname "$0")"
 
-$(pwd)/../../scripts/build-packages-dist.sh
+node $(pwd)/../../scripts/build-packages-dist.js
 
 # Workaround https://github.com/yarnpkg/yarn/issues/2165
 # Yarn will cache file://dist URIs and not update Angular code
@@ -26,4 +26,4 @@ trap rm_cache EXIT
 rm -rf dist
 rm -rf node_modules
 yarn install --cache-folder $cache
-yarn test
+yarn test

integration/language_service_plugin/package.json

@@ -12,7 +12,7 @@
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",
-    "build-dist": "../../scripts/build-packages-dist.sh && yarn install --check-files",
+    "build-dist": "node ../../scripts/build-packages-dist.js && yarn install --check-files",
     "cleanup": "rm -rf ti-*.log tsserver.log",
     "golden": "yarn build && node generate.js",
     "test": "yarn cleanup && yarn build && jasmine test.js"

integration/ngcc/debug-test.sh

@@ -11,7 +11,7 @@ set -u -e -o pipefail
 
 cd "$(dirname "$0")"
 
-$(pwd)/../../scripts/build-packages-dist.sh
+node $(pwd)/../../scripts/build-packages-dist.js
 
 # Workaround https://github.com/yarnpkg/yarn/issues/2165
 # Yarn will cache file://dist URIs and not update Angular code
@@ -26,4 +26,4 @@ trap rm_cache EXIT
 rm -rf dist
 rm -rf node_modules
 yarn install --cache-folder $cache
-yarn test
+yarn test