build: run tests against view engine and ivy (#17491)

We currently only run tests against Ivy due to the
commit that switched the `--define=compile` flag.

This means that the `ivy_test` and `local_browsers` job
are doing the same. Instead we should change `ivy_test` to
run tests against View Engine. Same applies for the cronjobs.

Author: devversion

.circleci/config.yml

@@ -105,7 +105,6 @@ var_15: &ignore_presubmit_branch_filter
   branches:
     ignore:
       - "_presubmit"
-      - "ivy-2019"
 
 # Runs a script that sets up the Bazel remote execution. This will be used by jobs that run
 # Bazel primarily and should benefit from remote caching and execution.
@@ -386,10 +385,10 @@ jobs:
     - run: bazel test src/... --build_tag_filters=-e2e --test_tag_filters=-e2e
 
   # ----------------------------------------------------------------------------
-  # Job that runs all Bazel tests against Ivy with the current Angular version
+  # Job that runs all Bazel tests against View Engine with the current Angular version
   # specified in the project dev dependencies.
   # ----------------------------------------------------------------------------
-  ivy_test:
+  view_engine_test:
     <<: *job_defaults
     resource_class: xlarge
     environment:
@@ -403,17 +402,14 @@ jobs:
       - *yarn_install
       - *setup_bazel_binary
 
-      # Setup ngcc to make the Angular packages compatible with ngtsc (i.e. creating
-      # directive and component definitions as static class members).
-      - run: node ./scripts/circleci/setup-ivy-ngcc.js
-      # Run project tests with ngtsc and the Ivy Angular packages.
-      - run: bazel build src/... --build_tag_filters=-docs-package,-e2e --define=compile=aot
-      - run: bazel test src/... --build_tag_filters=-docs-package,-e2e --test_tag_filters=-e2e --define=compile=aot
+      # Run project tests with NGC and View Engine.
+      - run: bazel build src/... --build_tag_filters=-docs-package,-e2e --define=compile=legacy
+      - run: bazel test src/... --build_tag_filters=-docs-package,-e2e --test_tag_filters=-e2e --define=compile=legacy
 
   # ----------------------------------------------------------------------------
-  # Job that runs all Bazel tests against Ivy from angular/angular#master.
+  # Job that runs all Bazel tests against View Engine from angular/angular#master.
   # ----------------------------------------------------------------------------
-  ivy_snapshot_test_cronjob:
+  view_engine_snapshot_test_cronjob:
     <<: *job_defaults
     resource_class: xlarge
     environment:
@@ -427,11 +423,11 @@ jobs:
       - *yarn_install
       - *setup_bazel_binary
 
-      # Setup Angular ivy snapshots built with ngtsc.
-      - run: node ./scripts/circleci/setup-angular-snapshots.js --tag master-ivy-aot
-      # Run project tests with ngtsc and the Ivy Angular packages.
-      - run: bazel build src/... --build_tag_filters=-docs-package,-e2e --define=compile=aot
-      - run: bazel test src/... --build_tag_filters=-docs-package,-e2e --test_tag_filters=-e2e --define=compile=aot
+      # Setup Angular snapshots by installing the artifacts from the Github repositories.
+      - run: node ./scripts/circleci/setup-angular-snapshots.js --tag master
+      # Run project tests with NGC and View Engine.
+      - run: bazel build src/... --build_tag_filters=-docs-package,-e2e --define=compile=legacy
+      - run: bazel test src/... --build_tag_filters=-docs-package,-e2e --test_tag_filters=-e2e --define=compile=legacy
 
   # ----------------------------------------------------------------------------
   # Job that runs all Bazel tests against material-components-web#master.
@@ -494,7 +490,7 @@ workflows:
     jobs:
       - bazel_build:
           filters: *ignore_presubmit_branch_filter
-      - ivy_test:
+      - view_engine_test:
           filters: *ignore_presubmit_branch_filter
       - api_golden_checks:
           filters: *ignore_presubmit_branch_filter
@@ -536,7 +532,7 @@ workflows:
       # is no easy way to detect whether a job runs inside of a cronjob or specific
       # workflow. See: https://circleci.com/ideas/?idea=CCI-I-295
       - snapshot_tests_local_browsers
-      - ivy_snapshot_test_cronjob
+      - view_engine_snapshot_test_cronjob
       - mdc_snapshot_test_cronjob
     triggers:
       - schedule:

package.json

@@ -13,7 +13,7 @@
     "yarn": ">= 1.17.3"
   },
   "scripts": {
-    "postinstall": "node --preserve-symlinks --preserve-symlinks-main tools/bazel/postinstall-patches.js | ngcc --properties main",
+    "postinstall": "node --preserve-symlinks --preserve-symlinks-main tools/bazel/postinstall-patches.js && ngcc --properties main --create-ivy-entry-points",
     "build": "bash ./scripts/build-packages-dist.sh",
     "bazel:buildifier": "find . -type f \\( -name \"*.bzl\" -or -name WORKSPACE -or -name BUILD -or -name BUILD.bazel \\) ! -path \"*/node_modules/*\" | xargs buildifier -v --warnings=attr-cfg,attr-license,attr-non-empty,attr-output-default,attr-single-file,constant-glob,ctx-args,depset-iteration,depset-union,dict-concatenation,duplicated-name,filetype,git-repository,http-archive,integer-division,load,load-on-top,native-build,native-package,output-group,package-name,package-on-top,redefined-variable,repository-name,same-origin-load,string-iteration,unused-variable,unsorted-dict-items,out-of-order-load",
     "bazel:format-lint": "yarn -s bazel:buildifier --lint=warn --mode=check",

packages.bzl

@@ -8,24 +8,42 @@ VERSION_PLACEHOLDER_REPLACEMENTS = {
     "0.0.0-NG": ANGULAR_PACKAGE_VERSION,
 }
 
-# UMD bundles for Angular packages and subpackages we depend on for development and testing.
-ANGULAR_LIBRARY_UMDS = [
-    "@npm//:node_modules/@angular/animations/bundles/animations-browser.umd.js",
-    "@npm//:node_modules/@angular/animations/bundles/animations.umd.js",
-    "@npm//:node_modules/@angular/common/bundles/common-http-testing.umd.js",
-    "@npm//:node_modules/@angular/common/bundles/common-http.umd.js",
-    "@npm//:node_modules/@angular/common/bundles/common-testing.umd.js",
-    "@npm//:node_modules/@angular/common/bundles/common.umd.js",
-    "@npm//:node_modules/@angular/compiler/bundles/compiler-testing.umd.js",
+# List of default Angular library UMD bundles which are not processed by ngcc.
+ANGULAR_NO_NGCC_BUNDLES = [
     "@npm//:node_modules/@angular/compiler/bundles/compiler.umd.js",
-    "@npm//:node_modules/@angular/core/bundles/core-testing.umd.js",
-    "@npm//:node_modules/@angular/core/bundles/core.umd.js",
-    "@npm//:node_modules/@angular/elements/bundles/elements.umd.js",
-    "@npm//:node_modules/@angular/forms/bundles/forms.umd.js",
-    "@npm//:node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js",
-    "@npm//:node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js",
-    "@npm//:node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js",
-    "@npm//:node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js",
-    "@npm//:node_modules/@angular/platform-browser/bundles/platform-browser.umd.js",
-    "@npm//:node_modules/@angular/router/bundles/router.umd.js",
 ]
+
+# List of Angular library UMD bundles which will are processed by ngcc.
+ANGULAR_NGCC_BUNDLES = [
+    ("@angular/animations", ["animations-browser.umd.js", "animations.umd.js"]),
+    ("@angular/common", ["common-http-testing.umd.js", "common-http.umd.js", "common-testing.umd.js", "common.umd.js"]),
+    ("@angular/compiler", ["compiler-testing.umd.js"]),
+    ("@angular/core", ["core-testing.umd.js", "core.umd.js"]),
+    ("@angular/elements", ["elements.umd.js"]),
+    ("@angular/forms", ["forms.umd.js"]),
+    ("@angular/platform-browser-dynamic", ["platform-browser-dynamic-testing.umd.js", "platform-browser-dynamic.umd.js"]),
+    ("@angular/platform-browser", ["platform-browser.umd.js", "platform-browser-testing.umd.js", "platform-browser-animations.umd.js"]),
+    ("@angular/router", ["router.umd.js"]),
+]
+
+ANGULAR_LIBRARY_VIEW_ENGINE_UMDS = ANGULAR_NO_NGCC_BUNDLES + [
+    "@npm//:node_modules/%s/bundles/%s" % (pkgName, bundleName)
+    for pkgName, bundleNames in ANGULAR_NGCC_BUNDLES
+    for bundleName in bundleNames
+]
+ANGULAR_LIBRARY_IVY_UMDS = ANGULAR_NO_NGCC_BUNDLES + [
+    "@npm//:node_modules/%s/__ivy_ngcc__/bundles/%s" % (pkgName, bundleName)
+    for pkgName, bundleNames in ANGULAR_NGCC_BUNDLES
+    for bundleName in bundleNames
+]
+
+"""
+  Gets the list of targets for the Angular library UMD bundles. Conditionally
+  switches between View Engine or Ivy UMD bundles based on the "--define=compile" flag.
+"""
+
+def getAngularUmdTargets():
+    return select({
+        "//tools:view_engine_mode": ANGULAR_LIBRARY_VIEW_ENGINE_UMDS,
+        "//conditions:default": ANGULAR_LIBRARY_IVY_UMDS,
+    })

scripts/circleci/setup-ivy-ngcc.js

@@ -92,13 +92,20 @@ sass_binary(
     ],
 )
 
+genrule(
+    name = "setup_compile_mode_script",
+    outs = ["setup_compile_mode.js"],
+    cmd = "echo window.bazelCompileMode = \"'$(compile)'\"\; > $@",
+)
+
 dev_server(
     name = "devserver",
     srcs = [
         "favicon.ico",
         "index.html",
         "system-config.js",
         "system-rxjs-operators.js",
+        ":setup_compile_mode_script",
         ":theme",
         "//src/dev-app/icon:icon_demo_assets",
         "@npm//:node_modules/@material/animation/dist/mdc.animation.js",

src/dev-app/BUILD.bazel

@@ -24,10 +24,11 @@
 <body>
   <dev-app>Loading...</dev-app>
 </body>
+
 <script src="core-js/client/core.js"></script>
 <script src="zone.js/dist/zone.js"></script>
-
 <script src="systemjs/dist/system.js"></script>
+<script src="setup_compile_mode.js"></script>
 <script src="system-config.js"></script>
 <script src="https://www.youtube.com/iframe_api"></script>
 <script src="https://maps.googleapis.com/maps/api/js"></script>

src/dev-app/index.html

@@ -80,6 +80,11 @@ var pathMapping = {};
 /** Package configurations that will be used in SystemJS. */
 var packagesConfig = {};
 
+// The "bazelCompileMode" property will be set globally by the "setup-compile-mode.js"
+// script. This allows us to switch between Ivy and View Engine UMD bundles automatically.
+/** Whether the dev-app is served with Ivy enabled. */
+var isRunningWithIvy = window.bazelCompileMode === 'aot';
+
 // Configure all primary entry-points.
 configureEntryPoint('cdk');
 configureEntryPoint('cdk-experimental');
@@ -115,6 +120,18 @@ function configureEntryPoint(pkgName, entryPoint) {
       packagesConfig[srcRunfilePath + '/' + examplesName] = {main: 'index.js'};
 }
 
+/**
+ * Gets the path to the given bundle. Respects processing done by ngcc when
+ * running with Ivy enabled.
+ */
+function getBundlePath(bundleName, basePath) {
+  var relativeBundlePath = 'bundles/' + bundleName;
+  if (isRunningWithIvy) {
+    relativeBundlePath = '__ivy_ngcc__/' + relativeBundlePath;
+  }
+  return (basePath || '') + '/' + relativeBundlePath ;
+}
+
 var map = Object.assign({
   'main': 'main.js',
   'tslib': 'tslib/tslib.js',
@@ -162,18 +179,22 @@ var packages = Object.assign({
   '.': {defaultExtension: 'js'},
 
   // Angular specific mappings.
-  '@angular/core': {main: 'bundles/core.umd.js'},
-  '@angular/common': {main: 'bundles/common.umd.js'},
-  '@angular/common/http': {main: '../bundles/common-http.umd.js'},
-  '@angular/compiler': {main: 'bundles/compiler.umd.js'},
-  '@angular/forms': {main: 'bundles/forms.umd.js'},
-  '@angular/animations': {main: 'bundles/animations.umd.js'},
-  '@angular/elements': {main: 'bundles/elements.umd.js'},
-  '@angular/router': {main: 'bundles/router.umd.js'},
-  '@angular/animations/browser': {main: '../bundles/animations-browser.umd.js'},
-  '@angular/platform-browser/animations': {main: '../bundles/platform-browser-animations.umd'},
-  '@angular/platform-browser': {main: 'bundles/platform-browser.umd.js'},
-  '@angular/platform-browser-dynamic': {main: 'bundles/platform-browser-dynamic.umd.js'},
+  '@angular/core': {main: getBundlePath('core.umd.js')},
+  '@angular/common': {main: getBundlePath('common.umd.js')},
+  '@angular/common/http': {main: getBundlePath('common-http.umd.js', '../')},
+  '@angular/compiler': {main: getBundlePath('compiler.umd.js')},
+  '@angular/forms': {main: getBundlePath('forms.umd.js')},
+  '@angular/animations': {main: getBundlePath('animations.umd.js')},
+  '@angular/elements': {main: getBundlePath('elements.umd.js')},
+  '@angular/router': {main: getBundlePath('router.umd.js')},
+  '@angular/animations/browser': {
+    main: getBundlePath('animations-browser.umd.js', '../')
+  },
+  '@angular/platform-browser/animations': {
+    main: getBundlePath('platform-browser-animations.umd.js', '../')
+  },
+  '@angular/platform-browser': {main: getBundlePath('platform-browser.umd.js')},
+  '@angular/platform-browser-dynamic': {main: getBundlePath('platform-browser-dynamic.umd.js')},
 }, packagesConfig);
 
 // Configure the base path and map the different node packages.

src/dev-app/system-config.js

@@ -1,7 +1,7 @@
 package(default_visibility = ["//visibility:public"])
 
 load("@npm_bazel_typescript//:index.bzl", "ts_devserver")
-load("//:packages.bzl", "ANGULAR_LIBRARY_UMDS")
+load("//:packages.bzl", "getAngularUmdTargets")
 load("//tools:defaults.bzl", "ng_module", "sass_binary")
 
 exports_files([
@@ -105,7 +105,7 @@ ts_devserver(
         ":devserver-configure.js",
         "//tools/rxjs:rxjs_umd_modules",
         "@npm//:node_modules/tslib/tslib.js",
-    ] + ANGULAR_LIBRARY_UMDS,
+    ] + getAngularUmdTargets(),
     # Serving path of the bundle that serves all files specified in "deps" and "scripts".
     serving_path = "/bundle.js",
     # Files which should be provided by Bazel when running the devserver. These are not

src/e2e-app/BUILD.bazel

@@ -13,3 +13,10 @@ platform(
       }
     """,
 )
+
+config_setting(
+    name = "view_engine_mode",
+    values = {
+        "define": "compile=legacy",
+    },
+)

tools/BUILD.bazel

@@ -99,6 +99,12 @@ searchAndReplace(
 // Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1208.
 shelljs.cat(path.join(__dirname, './manifest_externs_hermeticity.patch')).exec('patch -p0');
 
+// Workaround for using Ngcc with "--create-ivy-entry-points". This is a special
+// issue for our repository since we want to run Ivy by default in the module resolution,
+// but still have the option to opt-out by not using the compiled ngcc entry-points.
+searchAndReplace(`[formatProperty + "_ivy_ngcc"]`, '[formatProperty]',
+  'node_modules/@angular/compiler-cli/ngcc/src/writing/new_entry_point_file_writer.js');
+
 /**
  * Reads the specified file and replaces matches of the search expression
  * with the given replacement. Throws if no changes were made.