test(ivy): update Material to recent commit from master branch (#31569)

Previously, the ivy-2019 branch of the Material (aka components) repo was
used, which contains some changes that were necessary to work with Ivy.
These changes are not longer necessary, as Material's master branch is
fully working with Ivy today. To be up-to-date with recent Material
development and its support for more recent dependencies, e.g. TypeScript,
it is desirable for us to be on a newer version of Material.

This commit moves the Material tests away from the ivy-2019 branch, to a
recent commit on master. We are not targeting the master branch itself,
as that would introduce a moving target into Angular's CI checks, which
is undesirable.

Lastly, the usage of gulp to run Material's tests is changed into using
Bazel, as Material itself is now also built with Bazel.

PR Close #31569

scripts/ci/clone_angular_material_repo.sh

@@ -6,5 +6,5 @@ set -u -e -o pipefail
 rm -rf ${MATERIAL_REPO_TMP_DIR}
 
 # Clone the Material repository into the given temporary directory.
-git clone --depth 1 --branch ${MATERIAL_REPO_BRANCH} ${MATERIAL_REPO_URL} \
+git clone --depth 1 --branch ${MATERIAL_REPO_TAG} ${MATERIAL_REPO_URL} \
   ${MATERIAL_REPO_TMP_DIR}

scripts/ci/run_angular_material_unit_tests.sh

@@ -6,20 +6,28 @@ set -u -e -o pipefail
 # Save the dir for the root of the Angular repo.
 angular_dir=$(pwd)
 
+# Disable full template type check, as Material doesn't build cleanly with it enabled.
+# See https://github.com/angular/components/pull/16373 for details.
+# The "ivyTemplateTypeCheck" flag is set to True so that a minimum amount of type checking still
+# occurs, at a level compatible with that of VE's type checking. This ensures Ivy's type checker
+# is still tested against the Material repo, albeit in its non-strict mode.
+sed -i'.bak' "s/\(_ENABLE_NG_TYPE_CHECKING = \)True/\1False/g" ${MATERIAL_REPO_TMP_DIR}/tools/defaults.bzl
+sed -i'.bak' "s/\(\"ivyTemplateTypeCheck\": \)False/\1True/g" dist/packages-dist-ivy-aot/bazel/src/ng_module.bzl
+
 # Switch into Material directory.
 cd ${MATERIAL_REPO_TMP_DIR}
 
-# Install this version of Angular into the freshly cloned repo.
-rm -rf ./node_modules/@angular/*
-cp -r ${angular_dir}/dist/packages-dist-ivy-aot/* ./node_modules/@angular/
-
-# The angular/material2 CI sets TEST_PLATFORM to either "local", "saucelabs", or "browserstack".
-# For angular/angular, we only want to run the "local" tests.
-export TEST_PLATFORM=local
+# Updates Material's package.json to refer to the packages-dist-ivy-aot directory.
+# Note that it's not necessary to perform a yarn install, as Bazel performs its own yarn install.
+node ${angular_dir}/scripts/ci/update-deps-to-dist-packages.js ${MATERIAL_REPO_TMP_DIR}/package.json ${angular_dir}/dist/packages-dist-ivy-aot/
 
 # Append the test blocklist into angular/material2's karma-test-shim.js.
 # This filters out known-failing tests because the goal is to prevent regressions.
 cat ${angular_dir}/tools/material-ci/angular_material_test_blocklist.js >> ./test/karma-test-shim.js
 
-# Now actually run the tests.
-yarn gulp test:single-run
+# Create a symlink for the Bazel binary installed through NPM, as running through Yarn introduces OOM errors.
+./scripts/circleci/setup_bazel_binary.sh
+
+# Now actually run the tests. The dev-app target is excluded as it fails to compile due to
+# limitations in Ivy's type checker (see FW-1352 and FW-1433)
+bazel test src/... --deleted_packages=//src/dev-app --build_tag_filters=-docs-package,-e2e,-browser:firefox-local --test_tag_filters=-e2e,-browser:firefox-local --define=compile=aot

scripts/ci/update-deps-to-dist-packages.js

@@ -0,0 +1,63 @@
+/**
+ * This script updates a package.json file by replacing all dependencies and devDependencies
+ * such that all packages from the @angular scope point to the packages-dist directory.
+ *
+ * Please be aware that updating of versions might introduce compatibility issues. For instance,
+ * if a peer dependency of Angular, e.g. "typescript" changes, the package.json that is updated
+ * by this script will not have updated the "typescript" dependency to satisfy the peer dependency
+ * requirement. As a result, incompatibility errors might occur.
+ */
+'use strict';
+
+const {yellow, green} = require('chalk');
+const {existsSync, writeFileSync} = require('fs');
+const {resolve} = require('path');
+
+const [, , packageJsonPath, packagesDistRoot] = process.argv;
+
+const packageJson = require(packageJsonPath);
+
+const updated = [];
+const skipped = [];
+function updateDeps(dependencies) {
+  for (const packageName of Object.keys(dependencies)) {
+    // We're only interested to update packages in the @angular scope
+    if (!packageName.startsWith('@angular/')) {
+      continue;
+    }
+
+    // Within the packages-dist directory there's no scope name
+    const packageNameWithoutScope = packageName.replace('@angular/', '');
+    const packagePath = resolve(packagesDistRoot, packageNameWithoutScope);
+
+    // Check whether the package exists in packages-dist. Not all packages
+    // in the @angular scope are published from the main Angular repo.
+    if (existsSync(packagePath)) {
+      // Update the dependency to point to the packages-dist location.
+      dependencies[packageName] = `file:${packagePath}`;
+      updated.push(packageName);
+    } else {
+      skipped.push(packageName);
+    }
+  }
+}
+
+
+// Update dependencies from @angular scope to those in the packages-dist folder
+updateDeps(packageJson.dependencies);
+updateDeps(packageJson.devDependencies);
+
+// Write the updated package.json contents
+writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
+
+// Log all packages that were updated
+if (updated.length > 0) {
+  console.log(green(`Updated ${packageJsonPath} to packages in ${packagesDistRoot}:`));
+  console.log(`  ${updated.join('\n  ')}\n`);
+}
+
+// Log the packages that were skipped, as they were not present in the packages-dist directory
+if (skipped.length > 0) {
+  console.log(yellow(`Did not update packages that were not present in ${packagesDistRoot}:`));
+  console.log(`  ${skipped.join('\n  ')}\n`);
+}