feat: Use Bazel for builds (#2152)

BREAKING CHANGES:
Components can no longer be imported through `@angular-mdc/web`. Use the individual secondary entry-points, such as `@angular-mdc/web/button`

Also, we no longer have a direct depedency on `tslib`. Instead it is now listed a `peerDependency`.

Users not using the Angular CLI will need to manually install `tslib` via;

```
yarn add tslib
# or
npm install tslib --save
```

closes #2151 closes #2153

Author: trimox

.bazelignore

@@ -0,0 +1 @@
+node_modules

.bazelrc

@@ -0,0 +1,71 @@
+###############################
+# Filesystem interactions     #
+###############################
+
+# Don't create bazel-* symlinks in the WORKSPACE directory.
+# These require .gitignore and may scare users. Also, it's a workaround for
+# https://github.com/bazelbuild/rules_typescript/issues/12 which affects the common case of
+# having `tsconfig.json` in the WORKSPACE directory. Instead, you should run
+# `bazel info output_base` to find out where the outputs went.
+build --symlink_prefix=/
+
+# Performance: avoid stat'ing input files
+build --watchfs
+
+# Turn off legacy external runfiles
+build --nolegacy_external_runfiles
+run --nolegacy_external_runfiles
+test --nolegacy_external_runfiles
+
+# This flag is needed to so that the bazel cache is not invalidated
+# when running bazel via `yarn bazel`.
+build --incompatible_strict_action_env
+
+###############################
+# Output control              #
+###############################
+
+# A more useful default output mode for bazel query
+# Prints eg. "ng_module rule //foo:bar" rather than just "//foo:bar"
+query --output=label_kind
+
+# By default, failing tests don't print any output, it goes to the log file
+test --test_output=errors
+
+#################################
+# Release configuration.        #
+# Run with "--config=release"   #
+#################################
+
+# Configures script to do version stamping.
+# See https://docs.bazel.build/versions/master/user-manual.html#flag--workspace_status_command
+build:release --workspace_status_command="node ./tools/bazel-stamp-vars.js"
+build:release --stamp
+
+################################
+# View Engine / Ivy toggle     #
+################################
+build:view-engine --define=angular_ivy_enabled=False
+build:ivy --define=angular_ivy_enabled=True
+
+# Set Ivy as the default
+build --config=ivy
+
+################################
+# --config=debug               #
+################################
+
+# Enable debugging tests with --config=debug
+test:debug --test_arg=--node_options=--inspect-brk --test_output=streamed --test_strategy=exclusive --test_timeout=9999 --nocache_test_results
+
+################################
+# Local Environment Setup      #
+#  Needs to be last statement  #
+################################
+# Load any settings which are specific to the current user. Needs to be *last* statement
+# in this config, as the user configuration should be able to overwrite flags from this file.
+try-import .bazelrc.user
+
+# TODO: check if we can enable these deprecations.
+build --incompatible_new_actions_api=false
+build --incompatible_no_support_tools_in_action_inputs=false

.bazelversion

@@ -0,0 +1 @@
+2.2.0

.gitattributes

@@ -35,7 +35,7 @@ jobs:
           yarn
      
       - name: Build angular-mdc-web
-        run: yarn run build:release
+        run: sudo yarn run build
 
       - name: Build documentation
         run: |

.github/workflows/build-deploy-docs.yml

@@ -25,7 +25,7 @@ jobs:
         with:
           node-version: 13
       - run: yarn
-      - run: yarn build
+      - run: sudo yarn build
   unit-test:
     runs-on: ubuntu-latest
     steps:

.github/workflows/test.yml

@@ -4,11 +4,12 @@
 /dist
 /tmp
 /out-tsc
+/bazel-out
+/demos/node_modules
+/demos/dist
 
 # dependencies
 /node_modules
-/demos/node_modules
-/demos/dist
 
 # IDEs and editors
 /.idea
@@ -20,18 +21,20 @@
 *.sublime-workspace
 
 # IDE - VSCode
-.vscode/*
+/.idea
+/.vscode/launch.json
+/*.iml
 
 # misc
+.DS_Store
 /.sass-cache
 /connect.lock
-/coverage
 /libpeerconnection.log
 npm-debug.log
+yarn-debug.log
 yarn-error.log
 testem.log
-/typings
-
-# System Files
-.DS_Store
-Thumbs.db
+/.chrome
+/.git
+/.firebase
+/.bazelrc.user

.gitignore

@@ -0,0 +1,23 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//:rollup-globals.bzl", "ROLLUP_GLOBALS")
+load("//packages:config.bzl", "MDC_ENTRYPOINTS")
+
+exports_files([
+    "LICENSE",
+    "README.md",
+])
+
+genrule(
+    name = "rollup_globals",
+    outs = ["rollup_globals.json"],
+    cmd = "echo '%s' > $@" % ROLLUP_GLOBALS,
+)
+
+entryPoints = ["web/%s" % e for e in MDC_ENTRYPOINTS]
+
+genrule(
+    name = "entry_points_manifest",
+    outs = ["entry_points_manifest.json"],
+    cmd = "echo '%s' > $@" % entryPoints,
+)

BUILD.bazel

@@ -0,0 +1,61 @@
+workspace(
+    name = "angular_mdc",
+    managed_directories = {"@npm": ["node_modules"]},
+)
+
+load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
+
+# Add NodeJS rules
+http_archive(
+    name = "build_bazel_rules_nodejs",
+    sha256 = "2eca5b934dee47b5ff304f502ae187c40ec4e33e12bcbce872a2eeb786e23269",
+    urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/1.4.1/rules_nodejs-1.4.1.tar.gz"],
+)
+
+load("@build_bazel_rules_nodejs//:index.bzl", "check_bazel_version", "node_repositories", "yarn_install")
+
+# The minimum bazel version to use with this repo.
+check_bazel_version("2.2.0")
+
+node_repositories(
+    node_repositories = {
+        "13.10.1-darwin_amd64": ("node-v13.10.1-darwin-x64.tar.gz", "node-v13.10.1-darwin-x64", "a6a66fdc79e70267fc191f10ee045793240974e1268fdea6c2d28afbc1d635e8"),
+        "13.10.1-linux_amd64": ("node-v13.10.1-linux-x64.tar.xz", "node-v13.10.1-linux-x64", "69d69165282d88f321e751f03ee5d3370db65e5ca4c587af24994b12f31d4827"),
+        "13.10.1-windows_amd64": ("node-v13.10.1-win-x64.zip", "node-v13.10.1-win-x64", "f9d0aac273a44dbd52dd8cdb3d6c684b68b860d128af58d77a0c08f39f51f229"),
+    },
+    node_urls = ["https://nodejs.org/dist/v{version}/{filename}"],
+    node_version = "13.10.1",
+    # We do not need to define a specific yarn version as bazel will respect the .yarnrc file
+    # and run the version of yarn defined at the set-path value.
+    # Since bazel runs yarn from the working directory of the package.json, and our .yarnrc
+    # file is in the same directory, it correctly discovers and respects it.  Additionally,
+    # it ensures that the yarn environment variable to detect if yarn has already followed
+    # the set-path value is reset.
+)
+
+yarn_install(
+    name = "npm",
+    # Redirects Yarn `stdout` output to `stderr`. This ensures that stdout is not accidentally
+    # polluted when Bazel runs Yarn. Workaround until the upstream fix is available:
+    # https://github.com/bazelbuild/bazel/pull/10611.
+    args = ["1>&2"],
+    # We add the postinstall patches file, and ngcc main fields update script here so
+    # that Yarn will rerun whenever one of these files has been modified.
+    data = [
+        "//:tools/postinstall/apply-patches.js",
+        "//:tools/postinstall/update-ngcc-main-fields.js",
+    ],
+    package_json = "//:package.json",
+    quiet = False,
+    yarn_lock = "//:yarn.lock",
+)
+
+# Install all bazel dependencies of the @ngdeps npm packages
+load("@npm//:install_bazel_dependencies.bzl", "install_bazel_dependencies")
+
+install_bazel_dependencies()
+
+# Setup TypeScript Bazel workspace
+load("@npm_bazel_typescript//:index.bzl", "ts_setup_workspace")
+
+ts_setup_workspace()

WORKSPACE

@@ -0,0 +1,31 @@
+// Workaround for https://github.com/angular/angular/issues/18810
+// This file is required because when using the Angular NPM packages and building
+// with AOT compilation, NGC needs the "ngsummary.json" files.
+{
+  "angularCompilerOptions": {
+    // In snapshot builds the compiler-cli will now use ngtsc by default. In
+    // order to be able to build the summary files, we need to use ngc.
+    "enableIvy": false
+  },
+  "compilerOptions": {
+    "module": "umd",
+    "moduleResolution": "node",
+    "lib": [
+      "dom",
+      "es2015"
+    ],
+    "experimentalDecorators": true,
+    "types": []
+  },
+  "include": [
+    "node_modules/@angular/**/*"
+  ],
+  "exclude": [
+    "node_modules/@angular/**/schematics/**",
+    "node_modules/@angular/**/testing/**",
+    "node_modules/@angular/bazel/**",
+    "node_modules/@angular/common/upgrade*",
+    "node_modules/@angular/compiler-cli/**",
+    "node_modules/@angular/router/upgrade*"
+  ]
+}

angular-tsconfig.json

@@ -21,7 +21,7 @@
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.app.json",
+            "tsConfig": "tsconfig.json",
             "assets": [
               "src/favicon.png",
               "src/assets"
@@ -50,7 +50,7 @@
               "extractCss": true,
               "namedChunks": false,
               "aot": true,
-	      "extractLicenses": true,
+              "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
               "budgets": [
@@ -100,4 +100,4 @@
     }
   },
   "defaultProject": "angular-mdc-demos"
-}
+}

build-config.js

@@ -8,25 +8,25 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^9.0.5",
-    "@angular/compiler": "^9.0.5",
-    "@angular/core": "^9.0.5",
-    "@angular/forms": "^9.0.5",
-    "@angular/platform-browser": "^9.0.5",
-    "@angular/platform-browser-dynamic": "^9.0.5",
-    "@angular/router": "^9.0.5",
+    "@angular/common": "^9.0.7",
+    "@angular/compiler": "^9.0.7",
+    "@angular/core": "^9.0.7",
+    "@angular/forms": "^9.0.7",
+    "@angular/platform-browser": "^9.0.7",
+    "@angular/platform-browser-dynamic": "^9.0.7",
+    "@angular/router": "^9.0.7",
     "rxjs": "~6.5.3",
     "tslib": "^1.11.1",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.900.5",
-    "@angular/cli": "^9.0.5",
-    "@angular/compiler-cli": "^9.0.5",
-    "@types/node": "^13.7.7",
+    "@angular-devkit/build-angular": "^0.900.7",
+    "@angular/cli": "^9.0.7",
+    "@angular/compiler-cli": "^9.0.7",
+    "@types/node": "^13.9.2",
     "highlight.js": "^9.18.1",
     "ngx-highlightjs": "^4.0.2",
-    "ts-node": "^8.5.4",
+    "ts-node": "^8.6.2",
     "tslint": "~5.20.1",
     "typescript": "~3.7.4"
   }

demos/angular.json

@@ -26,10 +26,10 @@ const routes: Routes = [
   {path: 'theme-docs', loadChildren: () => import('./components/theme-docs/theme.module').then(m => m.ThemeModule)},
   {
     path: 'data-table-demo', loadChildren: () =>
-      import('./components/data-table-demo/data-table.module').then(m => m.DataTableModule)
+      import('./components/data-table/module').then(m => m.DataTableModule)
   },
   {path: 'dialog-demo', loadChildren: () => import('./components/dialog/module').then(m => m.DialogModule)},
-  {path: 'drawer-demo', loadChildren: () => import('./components/drawer-demo/drawer.module').then(m => m.DrawerModule)},
+  {path: 'drawer-demo', loadChildren: () => import('./components/drawer/module').then(m => m.DrawerModule)},
   {
     path: 'elevation-demo', loadChildren: () =>
       import('./components/elevation-demo/elevation.module').then(m => m.ElevationModule)
@@ -54,7 +54,7 @@ const routes: Routes = [
     path: 'linear-progress-demo', loadChildren: () =>
       import('./components/linear-progress/module').then(m => m.LinearProgressModule)
   },
-  {path: 'list-demo', loadChildren: () => import('./components/list-demo/list.module').then(m => m.ListModule)},
+  {path: 'list-demo', loadChildren: () => import('./components/list/module').then(m => m.ListModule)},
   {path: 'menu-demo', loadChildren: () => import('./components/menu/module').then(m => m.MenuModule)},
   {
     path: 'menu-surface-demo', loadChildren: () =>

demos/package.json

@@ -3,7 +3,8 @@ import {Router, NavigationEnd} from '@angular/router';
 
 import {environment} from '../environments/environment';
 
-import {MdcDrawer, MdcTopAppBar} from '@angular-mdc/web';
+import {MdcDrawer} from '@angular-mdc/web/drawer';
+import {MdcTopAppBar} from '@angular-mdc/web/top-app-bar';
 
 const SMALL_WIDTH_BREAKPOINT = 1240;