build: remove hard-coded karma systemjs config

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(
@@ -102,17 +98,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
@@ -123,10 +111,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",
+)