build: switch to release output from bazel

.circleci/config.yml

@@ -155,7 +155,9 @@ jobs:
       - *yarn_install
       - *setup_bazel_binary
 
-      - run: bazel build src/...
+      # Exclude release and docs packages here as those will be built within
+      # the "build_release_packages" and "publish_snapshots" jobs.
+      - run: bazel build src/... --build_tag_filters=-docs-package,-release-package
 
   # --------------------------------------------------------------------------------------------
   # Job that runs ts-api-guardian against our API goldens in "tools/public_api_guard".
@@ -272,19 +274,24 @@ jobs:
       - *save_cache
 
   # -------------------------------------------------------------------------------------------
-  # Job that builds all release packages with Gulp. The built packages can be then used in the
-  # same workflow to publish snapshot builds or test the dev-app with the release packages.
+  # Job that builds all release packages. The built packages can be then used in the same
+  # workflow to publish snapshot builds.
   # -------------------------------------------------------------------------------------------
   build_release_packages:
     <<: *job_defaults
     resource_class: xlarge
+    environment:
+      GCP_DECRYPT_TOKEN: *gcp_decrypt_token
     steps:
       - *checkout_code
       - *restore_cache
+      - *setup_bazel_ci_config
+      - *setup_bazel_remote_execution
       - *yarn_download
       - *yarn_install
+      - *setup_bazel_binary
 
-      - run: yarn gulp ci:build-release-packages
+      - run: ./scripts/build-packages-dist.sh
       - run: yarn check-release-output
 
       # TODO(devversion): replace this with bazel tests that run Madge. This is

BUILD.bazel

@@ -1 +1,3 @@
 package(default_visibility = ["//visibility:public"])
+
+exports_files(["LICENSE"])

WORKSPACE

@@ -42,7 +42,9 @@ yarn_install(
     # are executed in the Bazel sandbox.
     data = [
         "//:angular-tsconfig.json",
+        "//:tools/bazel/flat_module_factory_resolution.patch",
         "//:tools/bazel/postinstall-patches.js",
+        "//:tools/bazel/rollup_windows_arguments.patch",
         "//:tools/npm/check-npm.js",
     ],
     package_json = "//:package.json",

packages.bzl

@@ -18,6 +18,24 @@ CDK_PACKAGES = [
     "table",
     "text-field",
     "tree",
+
+    # NOTE: "testing" should not be listed here as it will be treated as its own
+    # package. This is because we don't want to include "testing the testing utilities
+    # in the release output.
+]
+
+# Within the CDK, only a few targets have sass libraries which need to be
+# part of the release package. This list declares all CDK targets with sass
+# libraries that need to be included and re-exported at the package root.
+CDK_TARGETS_WITH_STYLES = [
+    "a11y",
+    "overlay",
+    "text-field",
+]
+
+CDK_SCSS_LIBS = [
+    "//src/cdk/%s:%s_scss_lib" % (p, p.replace("-", "_"))
+    for p in CDK_TARGETS_WITH_STYLES
 ]
 
 CDK_TARGETS = ["//src/cdk"] + ["//src/cdk/%s" % p for p in CDK_PACKAGES]
@@ -71,7 +89,7 @@ MATERIAL_PACKAGES = [
     "tree",
 ]
 
-MATERIAL_TARGETS = ["//src/material:material"] + ["//src/material/%s" % p for p in MATERIAL_PACKAGES]
+MATERIAL_TARGETS = ["//src/material"] + ["//src/material/%s" % p for p in MATERIAL_PACKAGES]
 
 # List that references the sass libraries for each Material package. This can be used to create
 # the theming scss-bundle or to specify dependencies for the all-theme.scss file.
@@ -108,7 +126,7 @@ MATERIAL_EXPERIMENTAL_SCSS_LIBS = [
 # all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
 # version for the placeholders.
 ANGULAR_PACKAGE_VERSION = "^8.0.0 || ^9.0.0-0"
-MDC_PACKAGE_VERSION = "^1.1.0"
+MDC_PACKAGE_VERSION = "^4.0.0-alpha.0"
 VERSION_PLACEHOLDER_REPLACEMENTS = {
     "0.0.0-MDC": MDC_PACKAGE_VERSION,
     "0.0.0-NG": ANGULAR_PACKAGE_VERSION,
@@ -122,6 +140,38 @@ ROLLUP_GLOBALS = {
     "@angular/material": "ng.material",
     "@angular/material-experimental": "ng.materialExperimental",
     "@angular/youtube-player": "ng.youtubePlayer",
+
+    # MDC Web
+    "@material/animation": "mdc.animation",
+    "@material/auto-init": "mdc.autoInit",
+    "@material/base": "mdc.base",
+    "@material/checkbox": "mdc.checkbox",
+    "@material/chips": "mdc.chips",
+    "@material/dialog": "mdc.dialog",
+    "@material/dom": "mdc.dom",
+    "@material/drawer": "mdc.drawer",
+    "@material/floating-label": "mdc.floatingLabel",
+    "@material/form-field": "mdc.formField",
+    "@material/grid-list": "mdc.gridList",
+    "@material/icon-button": "mdc.iconButton",
+    "@material/line-ripple": "mdc.lineRipple",
+    "@material/linear-progress": "mdc.linearProgress",
+    "@material/list": "mdc.list",
+    "@material/menu": "mdc.menu",
+    "@material/menu-surface": "mdc.menuSurface",
+    "@material/notched-outline": "mdc.notchedOutline",
+    "@material/radio": "mdc.radio",
+    "@material/ripple": "mdc.ripple",
+    "@material/select": "mdc.select",
+    "@material/slider": "mdc.slider",
+    "@material/snackbar": "mdc.snackbar",
+    "@material/switch": "mdc.switch",
+    "@material/tab": "mdc.tab",
+    "@material/tab-bar": "mdc.tabBar",
+    "@material/tab-indicator": "mdc.tabIndicator",
+    "@material/tab-scroller": "mdc.tabScroller",
+    "@material/text-field": "mdc.textField",
+    "@material/top-app-bar": "mdc.topAppBar",
     "moment": "moment",
     "tslib": "tslib",
 }
@@ -145,13 +195,26 @@ ROLLUP_GLOBALS.update({
     for p in MATERIAL_PACKAGES
 })
 
-# Rollup globals for material experiemental subpackages, e.g., {"@angular/material-experimental/list": "ng.materialExperimental.list"}
+# Rollup globals for material experimental subpackages, e.g.,
+# {"@angular/material-experimental/list": "ng.materialExperimental.list"}
 ROLLUP_GLOBALS.update({
-    "@angular/material-experiemntal/%s" % p: "ng.materialExperimental.%s" % p
+    "@angular/material-experimental/%s" % p: "ng.materialExperimental.%s" % p
     for p in MATERIAL_EXPERIMENTAL_PACKAGES
 })
 
-# UMD bundles for Angular packages and subpackges we depend on for development and testing.
+# Rollup globals the examples package. Since individual examples are
+# grouped by package and component, the primary entry-point imports
+# from entry-points which should be treated as external imports.
+ROLLUP_GLOBALS.update({
+    "@angular/material-examples/cdk/%s" % p: "ng.materialExamples.cdk.%s" % p
+    for p in CDK_PACKAGES + CDK_EXPERIMENTAL_PACKAGES
+})
+ROLLUP_GLOBALS.update({
+    "@angular/material-examples/material/%s" % p: "ng.materialExamples.material.%s" % p
+    for p in MATERIAL_PACKAGES + MATERIAL_EXPERIMENTAL_PACKAGES
+})
+
+# 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",

scripts/build-packages-dist.sh

@@ -0,0 +1,66 @@
+#!/usr/bin/env bash
+
+# Script that builds the release output of all packages which have the "release-package"
+# bazel tag set. The script builds all those packages and copies the release output to a
+# folder within the project.
+
+set -u -e -o pipefail
+
+# Go to project directory.
+cd $(dirname ${0})/..
+
+# Either "legacy" (view engine) or "aot" (ivy)
+compile_mode=${1:-"legacy"}
+
+# Path to the bazel binary. By default uses "bazel" from the node modules but developers
+# can overwrite the binary though an environment variable. Also by default if we run Bazel
+# from the node modules, we don't want to access bazel through Yarn and NodeJS because it
+# could mean that the Bazel child process only has access to limited memory.
+bazel=${BAZEL_BIN_PATH:-$(yarn bin bazel)}
+
+echo "######################################"
+echo "  building release packages"
+echo "  mode: ${compile_mode}"
+echo "######################################"
+echo ""
+
+# Path to the output directory into which we copy the npm packages.
+dest_path="dist/releases"
+
+# Path to the bazel-bin directory.
+bazel_bin_path=$(${bazel} info bazel-bin 2> /dev/null)
+
+# List of targets that need to be built, e.g. //src/lib, //src/cdk, etc. Note we need to remove all
+# carriage returns because Bazel prints these on Windows. This breaks the Bash array parsing.
+targets=$(${bazel} query --output=label 'attr("tags", "\[.*release-package.*\]", //src/...)' \
+  'intersect kind(".*_package", //src/...)' 2> /dev/null | tr -d "\r")
+
+# Walk through each release package target and build it.
+for target in ${targets}; do
+  echo -e "Building: ${target} ...\n"
+  # Build with "--config=release" so that Bazel runs the workspace stamping script. The
+  # stamping script ensures that the version placeholder is populated in the release output.
+  ${bazel} build --config=release --define=compile=${compile_mode} ${target}
+  echo ""
+done
+
+# Delete the distribution directory so that the output is guaranteed to be clean. Re-create
+# the empty directory so that we can copy the release packages into it later.
+rm -Rf ${dest_path}
+mkdir -p ${dest_path}
+
+# Extracts the package name from the Bazel target names. e.g. `src/material:npm_package`
+# will result in "material".
+dirs=`echo "$targets" | sed -e 's/\/\/src\/\(.*\):npm_package/\1/'`
+
+# Copy the package output for all built NPM packages into the dist directory.
+for pkg in ${dirs}; do
+  pkg_dir="${bazel_bin_path}/src/${pkg}/npm_package"
+  target_dir="${dest_path}/${pkg}"
+
+  if [[ -d ${pkg_dir} ]]; then
+    echo "> Copying package output to \"${target_dir}\".."
+    rm -rf ${target_dir}
+    cp -R --no-preserve=mode ${pkg_dir} ${target_dir}
+  fi
+done

src/cdk-experimental/BUILD.bazel

@@ -23,9 +23,6 @@ ng_package(
     srcs = ["package.json"],
     entry_point = ":public-api.ts",
     globals = ROLLUP_GLOBALS,
-    # TODO(devversion): Use the npm package for publishing. Right now this is disabled because
-    # we build using AOT for serving & testing, but the `ng_package` rule should not include factory
-    # files.
-    tags = ["manual"],
+    tags = ["release-package"],
     deps = CDK_EXPERIMENTAL_TARGETS,
 )

src/cdk-experimental/package.json

@@ -3,9 +3,13 @@
   "version": "0.0.0-PLACEHOLDER",
   "description": "Experimental components for Angular CDK",
   "main": "./bundles/cdk-experimental.umd.js",
-  "module": "./esm5/cdk-experimental.es5.js",
-  "es2015": "./esm2015/cdk-experimental.js",
-  "typings": "./cdk-experimental.d.ts",
+  "fesm5": "./fesm5/cdk-experimental.js",
+  "fesm2015": "./fesm2015/cdk-experimental.js",
+  "esm5": "./esm5/cdk-experimental_public_index.js",
+  "esm2015": "./esm2015/cdk-experimental_public_index.js",
+  "typings": "./cdk-experimental_public_index.d.ts",
+  "module": "./fesm5/cdk-experimental.js",
+  "es2015": "./fesm2015/cdk-experimental.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/angular/components.git"