build: remove hard-coded karma systemjs config (#18025)

Removes the hard-coded Karma SystemJS config in favor of a shared SystemJS
config that is used by both the dev-app and the legacy unit tests.

The config is generated through Bazel and leverages the
entry-point/package configuration we need to main in Bazel. That way we
only have one canonical place for package/entry-point configuration (the
`config.bzl` files per package).

Author: devversion

.circleci/config.yml

@@ -240,6 +240,7 @@ jobs:
     steps:
       - *checkout_code
       - *restore_cache
+      - *setup_bazel_ci_config
       - *yarn_download
       - *yarn_install
 
@@ -261,6 +262,7 @@ jobs:
     steps:
     - *checkout_code
     - *restore_cache
+    - *setup_bazel_ci_config
     - *yarn_download
     - *yarn_install
 

packages.bzl

@@ -13,7 +13,7 @@ VERSION_PLACEHOLDER_REPLACEMENTS = {
 
 # 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",
+    ("@angular/compiler", ["compiler.umd.js"]),
 ]
 
 # List of Angular library UMD bundles which will are processed by ngcc.
@@ -29,20 +29,39 @@ ANGULAR_NGCC_BUNDLES = [
     ("@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 a dictionary of all packages and their bundle names.
+"""
+
+def getFrameworkPackageBundles():
+    res = {}
+    for pkgName, bundleNames in ANGULAR_NGCC_BUNDLES + ANGULAR_NO_NGCC_BUNDLES:
+        res[pkgName] = res.get(pkgName, []) + bundleNames
+    return res
+
+"""
+  Gets a list of labels which resolve to the UMD bundles of the given packages.
+"""
+
+def getUmdFilePaths(packages, ngcc_artifacts):
+    tmpl = "@npm//:node_modules/%s" + ("/__ivy_ngcc__" if ngcc_artifacts else "") + "/bundles/%s"
+    return [
+        tmpl % (pkgName, bundleName)
+        for pkgName, bundleNames in packages
+        for bundleName in bundleNames
+    ]
+
+ANGULAR_PACKAGE_BUNDLES = getFrameworkPackageBundles()
+
+ANGULAR_LIBRARY_VIEW_ENGINE_UMDS = getUmdFilePaths(ANGULAR_NO_NGCC_BUNDLES, False) + \
+                                   getUmdFilePaths(ANGULAR_NGCC_BUNDLES, False)
+
+ANGULAR_LIBRARY_IVY_UMDS = getUmdFilePaths(ANGULAR_NO_NGCC_BUNDLES, False) + \
+                           getUmdFilePaths(ANGULAR_NGCC_BUNDLES, True)
 
 """
   Gets the list of targets for the Angular library UMD bundles. Conditionally
-  switches between View Engine or Ivy UMD bundles based on the 
+  switches between View Engine or Ivy UMD bundles based on the
   "--config={ivy,view-engine}" flag.
 """
 

src/dev-app/BUILD.bazel

@@ -2,12 +2,8 @@ package(default_visibility = ["//visibility:public"])
 
 load("@build_bazel_rules_nodejs//:index.bzl", "pkg_web")
 load("@build_bazel_rules_nodejs//internal/common:devmode_js_sources.bzl", "devmode_js_sources")
-load("//src/cdk:config.bzl", "CDK_ENTRYPOINTS")
-load("//src/cdk-experimental:config.bzl", "CDK_EXPERIMENTAL_ENTRYPOINTS")
-load("//src/material:config.bzl", "MATERIAL_ENTRYPOINTS")
-load("//src/material-experimental:config.bzl", "MATERIAL_EXPERIMENTAL_ENTRYPOINTS")
+load("//tools:create-system-config.bzl", "create_system_config")
 load("//tools:defaults.bzl", "ng_module", "sass_binary")
-load("//tools/bazel:expand_template.bzl", "expand_template")
 load("//tools/dev-server:index.bzl", "dev_server")
 
 ng_module(
@@ -103,17 +99,9 @@ sass_binary(
     ],
 )
 
-expand_template(
+create_system_config(
     name = "system-config",
-    configuration_env_vars = ["angular_ivy_enabled"],
     output_name = "system-config.js",
-    substitutions = {
-        "$CDK_ENTRYPOINTS_TMPL": str(CDK_ENTRYPOINTS),
-        "$CDK_EXPERIMENTAL_ENTRYPOINTS_TMPL": str(CDK_EXPERIMENTAL_ENTRYPOINTS),
-        "$MATERIAL_ENTRYPOINTS_TMPL": str(MATERIAL_ENTRYPOINTS),
-        "$MATERIAL_EXPERIMENTAL_ENTRYPOINTS_TMPL": str(MATERIAL_EXPERIMENTAL_ENTRYPOINTS),
-    },
-    template = "system-config-tmpl.js",
 )
 
 # File group for all static files which are needed to serve the dev-app. These files are
@@ -124,10 +112,10 @@ filegroup(
     srcs = [
         "favicon.ico",
         "index.html",
-        "system-rxjs-operators.js",
         ":system-config",
         ":theme",
         "//src/dev-app/icon:icon_demo_assets",
+        "//tools:system-rxjs-operators.js",
         "@npm//:node_modules/@material/animation/dist/mdc.animation.js",
         "@npm//:node_modules/@material/auto-init/dist/mdc.autoInit.js",
         "@npm//:node_modules/@material/base/dist/mdc.base.js",

src/dev-app/index.html

@@ -32,6 +32,16 @@
 <script src="https://www.youtube.com/iframe_api"></script>
 <script src="https://maps.googleapis.com/maps/api/js"></script>
 <script>
+  System.config({
+    map: {
+      // Maps imports where the AMD module names start with workspace name (commonly done in Bazel).
+      // This is needed for compatibility with dynamic runfile resolution of the devserver and the
+      // static runfile resolution done in the "pkg_web" rule. In the built web package, the output
+      // tree artifact serves as workspace root and root of the current dev-app Bazel package.
+      'angular_material': '',
+      'angular_material/src/dev-app': '',
+    }
+  });
   System.import('main').catch(console.error.bind(console));
 </script>
 </html>

src/dev-app/system-config-tmpl.js

@@ -1,5 +1,6 @@
 package(default_visibility = ["//visibility:public"])
 
+load("//tools:create-system-config.bzl", "create_system_config")
 load("//tools:defaults.bzl", "ts_library")
 
 exports_files(["bazel-karma-local-config.js"])
@@ -19,3 +20,14 @@ ts_library(
         "@npm//@types/jasmine",
     ],
 )
+
+# Creates a SystemJS configuration file that can be used for the Karma legacy
+# unit tests. This allows us to only have one canonical SystemJS configuration
+# file, and we don't need to repeat package/entry-point configurations.
+create_system_config(
+    name = "system-config",
+    base_url = "base/",
+    node_modules_base_path = "node_modules/",
+    output_name = "system-config.js",
+    packages_dir = "dist/packages",
+)

test/BUILD.bazel

@@ -50,9 +50,15 @@ module.exports = config => {
       {pattern: 'node_modules/@angular/**/*', included: false, watched: false},
       {pattern: 'node_modules/rxjs/**/*', included: false, watched: false},
 
-      {pattern: 'test/karma-system-config.js', included: true, watched: false},
+      // The Karma system configuration is built by Bazel. The built System config
+      // is copied into the "dist/" folder so that the Karma config can use it.
+      {pattern: 'dist/karma-system-config.js', included: true, watched: false},
       {pattern: 'test/karma-test-shim.js', included: true, watched: false},
 
+      // Needed for exposing the RxJS operators through the RxJS UMD bundle. This
+      // is done for performance reasons since fetching individual files is slow.
+      {pattern: 'tools/system-rxjs-operators.js', included: false, watched: false},
+
       // Include a Material theme in the test suite. Also include the MDC theme as
       // karma runs tests for the MDC prototype components as well.
       {

test/karma.conf.js

@@ -1,5 +1,10 @@
 package(default_visibility = ["//visibility:public"])
 
+exports_files([
+    "system-config-tmpl.js",
+    "system-rxjs-operators.js",
+])
+
 # Workaround for https://github.com/bazelbuild/bazel-toolchains/issues/356. We need the
 # "SYS_ADMIN" capability in order to run browsers with sandbox enabled.
 platform(

tools/BUILD.bazel

@@ -0,0 +1,42 @@
+load("//:packages.bzl", "ANGULAR_PACKAGE_BUNDLES")
+load("//src/cdk:config.bzl", "CDK_ENTRYPOINTS")
+load("//src/cdk-experimental:config.bzl", "CDK_EXPERIMENTAL_ENTRYPOINTS")
+load("//src/material:config.bzl", "MATERIAL_ENTRYPOINTS", "MATERIAL_TESTING_ENTRYPOINTS")
+load("//src/material-experimental:config.bzl", "MATERIAL_EXPERIMENTAL_ENTRYPOINTS")
+load("//tools/bazel:expand_template.bzl", "expand_template")
+
+"""
+  Macro that builds a SystemJS configuration for all packages and entry-points
+  configured in "config.bzl" files of the workspace. The SystemJS configuration
+  can be used in the dev-app and for building the legacy unit tests SystemJS config.
+"""
+
+def create_system_config(
+        name,
+        output_name,
+        # In Bazel the package output follows the same folder structure as the source
+        # code. This attribute makes the packages directory configurable since in the
+        # legacy output, the package output is located in "dist/packages".
+        packages_dir = "src",
+        # In Bazel, the node modules can be resolved without having to specify the
+        # path to the "node_modules" folder. In the legacy tests, this is not the case.
+        node_modules_base_path = "",
+        # In Bazel, files can be resolved without having to use Karma's default "base/"
+        # directory. For the legacy tests this needs to be configurable for now.
+        base_url = ""):
+    expand_template(
+        name = name,
+        output_name = output_name,
+        configuration_env_vars = ["angular_ivy_enabled"],
+        substitutions = {
+            "$ANGULAR_PACKAGE_BUNDLES": str(ANGULAR_PACKAGE_BUNDLES),
+            "$BASE_URL": base_url,
+            "$CDK_ENTRYPOINTS_TMPL": str(CDK_ENTRYPOINTS),
+            "$CDK_EXPERIMENTAL_ENTRYPOINTS_TMPL": str(CDK_EXPERIMENTAL_ENTRYPOINTS),
+            "$MATERIAL_ENTRYPOINTS_TMPL": str(MATERIAL_ENTRYPOINTS + MATERIAL_TESTING_ENTRYPOINTS),
+            "$MATERIAL_EXPERIMENTAL_ENTRYPOINTS_TMPL": str(MATERIAL_EXPERIMENTAL_ENTRYPOINTS),
+            "$NODE_MODULES_BASE_PATH": node_modules_base_path,
+            "$PACKAGES_DIR": packages_dir,
+        },
+        template = "//tools:system-config-tmpl.js",
+    )