build: add target to create dev-app web package (#17937)

Creates a new Bazel target that can be built to create a
static web package of the dev-app. The web package can be
deployed to Firebase or other static file hosting services.

In a follow-up, we can create a script that replicates what
the old firebase deploy gulp task did.

Author: devversion

src/dev-app/BUILD.bazel

@@ -1,5 +1,7 @@
 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")
@@ -111,8 +113,11 @@ expand_template(
     template = "system-config-tmpl.js",
 )
 
-dev_server(
-    name = "devserver",
+# File group for all static files which are needed to serve the dev-app. These files are
+# used in the devserver as runfiles and will be copied into the static web package that can
+# be deployed on static hosting services (like firebase).
+filegroup(
+    name = "dev_app_static_files",
     srcs = [
         "favicon.ico",
         "index.html",
@@ -158,10 +163,40 @@ dev_server(
         "@npm//:node_modules/tslib/tslib.js",
         "@npm//:node_modules/zone.js/dist/zone.js",
     ],
+)
+
+dev_server(
+    name = "devserver",
+    srcs = [":dev_app_static_files"],
     additional_root_paths = [
         "npm/node_modules",
+        # Needed for compatibility with "pkg_web" which always uses the tree
+        # artifact output as workspace root.
+        "angular_material",
     ],
     deps = [
         ":dev-app",
     ],
 )
+
+# Collects all ES5 JavaScript files which are required to serve the dev-app. By default,
+# ts_library and ng_module targets only expose the type definition files as outputs.
+devmode_js_sources(
+    name = "dev_app_js_sources",
+    tags = ["manual"],
+    deps = [":dev-app"],
+)
+
+# Target that builds a static web package of the dev-app. The web package can be
+# deployed on static hosting services (such as firebase).
+pkg_web(
+    name = "web_package",
+    srcs = [
+        ":dev_app_js_sources",
+        ":dev_app_static_files",
+    ],
+    additional_root_paths = [
+        "npm/node_modules",
+    ],
+    tags = ["manual"],
+)

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

@@ -18,17 +18,15 @@ var MATERIAL_EXPERIMENTAL_PACKAGES = $MATERIAL_EXPERIMENTAL_ENTRYPOINTS_TMPL;
 /** Whether the dev-app is served with Ivy enabled. */
 var isRunningWithIvy = '$ANGULAR_IVY_ENABLED_TMPL'.toString() === 'True';
 
-/** Bazel runfile path referring to the "src/" folder of the project. */
-var srcRunfilePath = 'angular_material/src';
+/** Bazel runfile path referring to the "src" folder of the project. */
+var srcRunfilePath = 'src';
 
 /** Path mappings that will be registered in SystemJS. */
 var pathMapping = {};
 
 /** Package configurations that will be used in SystemJS. */
 var packagesConfig = {};
 
-
-
 // Configure all primary entry-points.
 configureEntryPoint('cdk');
 configureEntryPoint('cdk-experimental');
@@ -60,6 +58,9 @@ function configureEntryPoint(pkgName, entryPoint) {
 
   pathMapping['@angular/' + name] = srcRunfilePath + '/' + name;
   pathMapping['@angular/' + examplesName] = srcRunfilePath + '/' + examplesName;
+
+  // Ensure that imports which resolve to the entry-point directory are
+  // redirected to the "index.js" file of the directory.
   packagesConfig[srcRunfilePath + '/' + name] =
       packagesConfig[srcRunfilePath + '/' + examplesName] = {main: 'index.js'};
 }
@@ -77,6 +78,13 @@ function getBundlePath(bundleName, basePath) {
 }
 
 var map = Object.assign({
+  // 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': '',
+
   'main': 'main.js',
   'tslib': 'tslib/tslib.js',
   'moment': 'moment/min/moment-with-locales.min.js',