ci: overwrite angular/components yarn typescript resolution (angular#…

…33717)

The components repository has a Yarn resolution to ensure that
dgeni-packages uses a specific TypeScript version. This resolution
causes the specified TS version to be considered as candidate for the
`@angular/bazel` peer dependency. Ultimately, Yarn decides to use
the TypeScript version from the resolution for `@angular/bazel`,
and builds will fail due to a version mismatch.

This is because `tsickle` will use the hoisted top-level TS
version (set to `3.7.4` ), while `@angular/bazel` uses the
version from the resolution (at the time of writing: v3.6.4)

PR Close angular#33717

.circleci/config.yml

@@ -764,16 +764,6 @@ jobs:
           # minimum dependency on NodeJS v12 and Yarn 1.19.1, but the framework repository uses
           # older versions.
           command: yarn --ignore-engines --cwd ${MATERIAL_REPO_TMP_DIR} install --frozen-lockfile --non-interactive
-      - run:
-          # Install TypeScript 3.7
-          name: Installing TypeScript 3.7 and TSickle 0.38 on Material dependencies.
-          # TODO: remove this once the repo has been updated to use TypeScript 3.7.
-          # While built Angular packages support both TS 3.6 and 3.7, @angular/bazel itself only
-          # supports TS 3.7 because TSickle 0.38.0 only supports TS 3.7.
-          # It shouldn't be necessary to install tsickle, but it's referenced in material and
-          # doesn't seem to be in the dependencies. Unsure how this worked before.
-          # https://github.com/angular/components/blob/636ae5c8754008bfcf4b2f3953c6b2c5a7e27a1a/tools/bazel/BUILD.bazel#L12
-          command: yarn --ignore-engines --cwd ${MATERIAL_REPO_TMP_DIR} add typescript@3.7.4 tsickle@0.38.0 --dev
       - save_cache:
           key: *material_unit_tests_cache_key
           paths:
@@ -784,6 +774,26 @@ jobs:
           name: "Setup Bazel RBE remote execution in Material repo"
           command: |
             ./.circleci/setup-rbe.sh "${MATERIAL_REPO_TMP_DIR}/.bazelrc.user"
+      - run:
+          # Updates Material's `package.json` to refer to the `packages-dist` directory. Note
+          # that it's not necessary to perform a yarn install, as Bazel runs it automatically.
+          name: Setting up release packages.
+          command: node scripts/ci/update-deps-to-dist-packages.js ${MATERIAL_REPO_TMP_DIR}/package.json dist/packages-dist/
+      - run:
+          # Install TypeScript 3.7 and Tsickle 0.38.0.
+          name: Setting up TypeScript 3.7 and Tsickle 0.38.0
+          # TODO: remove this once the repo has been updated to use TypeScript 3.7 and
+          # Tsickle 0.38.0. Note that the components repository has a Yarn resolution to ensure
+          # that "dgeni-packages" uses a specific TypeScript version. This resolution causes the
+          # specified TS version to be a valid candidate for the "@angular/bazel" peer dependency.
+          # Ultimately, Yarn seems to use the TS version from the resolution for Angular Bazel.
+          # This causes a mismatch of TypeScript versions as tsickle will use the v3.7.4 version,
+          # while Angular Bazel uses any arbitrary version from the resolution (currently v3.6.4).
+          # Also note that we need to explicitly update `tsickle` because `angular/components`
+          # declared it as explicit dep, and their current version is not compatible with TS 3.7.
+          command: |
+            sed -i -E 's#(dgeni-packages/typescript": ").+"#\13.7.4"#' ${MATERIAL_REPO_TMP_DIR}/package.json
+            yarn --ignore-engines --cwd ${MATERIAL_REPO_TMP_DIR} add typescript@3.7.4 tsickle@0.38.0 --dev
       - run:
           name: "Running Material unit tests"
           command: ./scripts/ci/run_angular_material_unit_tests.sh

scripts/ci/run_angular_material_unit_tests.sh

@@ -9,10 +9,6 @@ angular_dir=$(pwd)
 # Switch into Material directory.
 cd ${MATERIAL_REPO_TMP_DIR}
 
-# Updates Material's package.json to refer to the packages-dist 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/
-
 # Copy the test blocklist into the "angular/components" repository. The components
 # repository automatically picks up the blocklist and disables the specified tests.
 cp ${angular_dir}/tools/material-ci/test-blocklist.ts ${MATERIAL_REPO_TMP_DIR}/test/