build: add bazel rules

.circleci/config.yml

@@ -1,37 +1,93 @@
-# Javascript Node CircleCI 2.0 configuration file
-#
-# Check https://circleci.com/docs/2.0/language-javascript/ for more details
-#
+# Configuration file for https://circleci.com/gh/angular/flex-layout
+
+# Note: YAML anchors allow an object to be re-used, reducing duplication.
+# The ampersand declares an alias for an object, then later the `<<: *name`
+# syntax dereferences it.
+# See http://blog.daemonl.com/2016/02/yaml.html
+# To validate changes, use an online parser, eg.
+# http://yaml-online-parser.appspot.com/
+
+# Settings common to each job
+anchor_1: &job_defaults
+  working_directory: ~/ng
+  docker:
+    - image: angular/ngcontainer:0.2.0
+
+# After checkout, rebase on top of master.
+# Similar to travis behavior, but not quite the same.
+# By default, PRs are not rebased on top of master, which we want.
+# See https://discuss.circleci.com/t/1662
+anchor_2: &post_checkout
+  post: git pull --ff-only origin "refs/pull/${CI_PULL_REQUEST//*pull\//}/merge"
+
 version: 2
 jobs:
   build:
-    docker:
-      # specify the version you desire here
-      - image: circleci/node:8.9
-
-      # Specify service dependencies here if necessary
-      # CircleCI maintains a library of pre-built images
-      # documented at https://circleci.com/docs/2.0/circleci-images/
-      # - image: circleci/mongo:3.4.4
+    <<: *job_defaults
+    resource_class: large
+    steps:
+      - checkout:
+          <<: *post_checkout
+      - restore_cache:
+          key: layout-{{ .Branch }}-{{ checksum "package-lock.json" }}
 
-    working_directory: ~/repo
+      - run: bazel run @nodejs//:npm install
+      # For some reason, circleci needs the postinstall to be run explicitly.
+      # This may be unnecessary once rules_nodejs uses nodejs 8
+      - run: bazel run @nodejs//:npm run postinstall
+      # Use bazel query so that we explicitly ask for all buildable targets to be built as well
+      # This avoids waiting for the slowest build target to finish before running the first test
+      # See https://github.com/bazelbuild/bazel/issues/4257
+      # NOTE: Angular developers should typically just bazel build //... or bazel test //...
+      - run: bazel query --output=label //... | xargs bazel test
+      - save_cache:
+          key: layout-{{ .Branch }}-{{ checksum "package-lock.json" }}
+          paths:
+            - "node_modules"
 
+  hello_world:
+    <<: *job_defaults
     steps:
-      - checkout
+      - checkout:
+          <<: *post_checkout
+      - restore_cache:
+          key: layout-{{ .Branch }}-{{ checksum "package-lock.json" }}
+      - run: npm run hw:build
 
-      # Download and cache dependencies
+  aot:
+    <<: *job_defaults
+    steps:
+      - checkout:
+          <<: *post_checkout
       - restore_cache:
-          keys:
-          - v1-dependencies-{{ checksum "package.json" }}
-          # fallback to using the latest cache if no exact match is found
-          - v1-dependencies-
+          key: layout-{{ .Branch }}-{{ checksum "package-lock.json" }}
+      - run: npm run lib:build:aot
 
-      - run: npm install
+  universal:
+    <<: *job_defaults
+    steps:
+      - checkout:
+          <<: *post_checkout
+      - restore_cache:
+          key: layout-{{ .Branch }}-{{ checksum "package-lock.json" }}
+      - run: npm run universal:build
 
-      - save_cache:
-          paths:
-            - node_modules
-          key: v1-dependencies-{{ checksum "package.json" }}
+workflows:
+  version: 2
+  default_workflow:
+    jobs:
+      - build
+      - hello_world:
+        requires:
+          - build
+      - aot:
+        requires:
+          - build
+      - universal:
+        requires:
+          - build
 
-      # run the build!
-      - run: npm run lib:build
+general:
+  branches:
+    only:
+      - master

.gitignore

@@ -5,6 +5,7 @@ dist
 /tmp
 /deploy
 /screenshots
+/bazel-out
 
 # dependencies
 node_modules
@@ -28,3 +29,6 @@ testem.log
 src/apps/universal-app/package-lock.json
 src/apps/demo-app/package-lock.json
 src/apps/hello-world/package-lock.json
+src/apps/universal-app/yarn.lock
+src/apps/demo-app/yarn.lock
+src/apps/hello-world/yarn.lock

.travis.yml

@@ -19,9 +19,9 @@ branches:
 jobs:
   include:
     - env: "MODE=lint"
-    - env: "MODE=aot"
-    - env: "MODE=hello-world"
-    - env: "MODE=prerender"
+    # - env: "MODE=aot"
+    # - env: "MODE=hello-world"
+    # - env: "MODE=prerender"
     - env: "MODE=ssr"
     - env: "MODE=saucelabs_required"
     - env: "MODE=browserstack_required"

BUILD.bazel

@@ -0,0 +1,64 @@
+package(default_visibility = ["//visibility:public"])
+load("@build_bazel_rules_nodejs//:defs.bzl", "node_modules_filegroup")
+
+# This rule belongs in node_modules/BUILD
+# It's here as a workaround for
+# https://github.com/bazelbuild/bazel/issues/374#issuecomment-296217940
+node_modules_filegroup(
+    name = "node_modules",
+    packages = [
+      "@angular",
+      "@types",
+      "bytebuffer",
+      "jasmine",
+      "minimist",
+      "protobufjs",
+      "protractor",
+      "reflect-metadata",
+      "rxjs",
+      "tsickle",
+      "tslib",
+      "tsutils",
+      "typescript",
+      "zone.js",
+    ]
+)
+
+
+# Glob pattern that matches all Angular testing bundles.
+ANGULAR_TESTING = [
+  "node_modules/@angular/*/bundles/*-testing.umd.js",
+  # The compiler and the dynamic platform-browser should be visible only in tests
+  "node_modules/@angular/compiler/bundles/*.umd.js",
+  "node_modules/@angular/platform-browser-dynamic/bundles/*.umd.js",
+]
+
+filegroup(
+  name = "angular_bundles",
+  srcs = glob(["node_modules/@angular/*/bundles/*.umd.js"], exclude = ANGULAR_TESTING),
+)
+
+filegroup(
+  name = "angular_test_bundles",
+  testonly = 1,
+  srcs = glob(ANGULAR_TESTING),
+)
+
+filegroup(
+  name = "tslib_bundle",
+  testonly = 1,
+  srcs = glob(["node_modules/tslib/tslib.js"]),
+)
+
+# Files necessary for unit tests that use zonejs
+filegroup(
+  name = "web_test_bootstrap_scripts",
+  # The order of these deps is important.
+  # Do not sort.
+  srcs = [
+    "//:node_modules/reflect-metadata/Reflect.js",
+    "//:node_modules/zone.js/dist/zone.js",
+    "//:node_modules/zone.js/dist/zone-testing.js",
+    "//:node_modules/zone.js/dist/task-tracking.js",
+  ],
+)

WORKSPACE

@@ -0,0 +1,71 @@
+workspace(name = "angular_flex_layout")
+
+# Add nodejs rules
+http_archive(
+    name = "build_bazel_rules_nodejs",
+    url = "https://github.com/bazelbuild/rules_nodejs/archive/0.7.0.zip",
+    strip_prefix = "rules_nodejs-0.7.0",
+    sha256 = "d0cecf6b149d431ee8349f683d1db6a2a881ee81d8066a66c1b112a4b02748de",
+)
+
+# NOTE: this rule installs nodejs, npm, and yarn, but does NOT install
+# your npm dependencies. You must still run the package manager.
+load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories")
+
+check_bazel_version("0.11.0")
+node_repositories(package_json = ["//:package.json"])
+
+# Add sass rules
+git_repository(
+  name = "io_bazel_rules_sass",
+  remote = "https://github.com/bazelbuild/rules_sass.git",
+  tag = "0.0.3",
+)
+
+load("@io_bazel_rules_sass//sass:sass.bzl", "sass_repositories")
+sass_repositories()
+
+# Add TypeScript rules
+http_archive(
+  name = "build_bazel_rules_typescript",
+  url = "https://github.com/bazelbuild/rules_typescript/archive/0.12.0.zip",
+  strip_prefix = "rules_typescript-0.12.0",
+  sha256 = "60c17e558fdcb66783f39418c8dfd4858c8fd748089e42ddf91e75a853471244",
+)
+
+# Setup TypeScript Bazel workspace
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_setup_workspace")
+ts_setup_workspace()
+
+# Add Angular rules
+local_repository(
+  name = "angular",
+  path = "node_modules/@angular/bazel",
+)
+
+# Add rxjs
+local_repository(
+  name = "rxjs",
+  path = "node_modules/rxjs/src",
+)
+
+# Point to the apps workspace just so that Bazel doesn't descend into it
+# when expanding the //... pattern
+local_repository(
+    name = "demo_app",
+    path = "src/apps/demo-app",
+)
+
+# Point to the apps workspace just so that Bazel doesn't descend into it
+# when expanding the //... pattern
+local_repository(
+    name = "hello_world_app",
+    path = "src/apps/hello-world",
+)
+
+# Point to the apps workspace just so that Bazel doesn't descend into it
+# when expanding the //... pattern
+local_repository(
+    name = "universal_app",
+    path = "src/apps/universal-app",
+)

angular.tsconfig.json

@@ -0,0 +1,22 @@
+// WORKAROUND https://github.com/angular/angular/issues/18810
+// This file is required to run ngc on angular libraries, to write files like
+// node_modules/@angular/core/core.ngsummary.json
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "es2015"
+    ],
+    "experimentalDecorators": true,
+    "types": ["jasmine"]
+  },
+  "include": [
+    "node_modules/@angular/**/*"
+  ],
+  "exclude": [
+    "node_modules/@angular/bazel/**",
+    "node_modules/@angular/compiler-cli/**",
+    "node_modules/@angular/*/testing/**",
+    "node_modules/@angular/material/schematics/**"
+  ]
+}

build-config.js

@@ -13,7 +13,19 @@ const buildVersion = package.version;
  * Required Angular version for all Angular Layout packages. This version will be used
  * as the peer dependency version for Angular in all release packages.
  */
-const angularVersion = '>=6.0.0-beta.0 <7.0.0';
+const angularVersion = '^6.0.0 || ^6.0.0-rc.1';
+
+/**
+ * Required Angular CDK version for all Angular Layout packages. This version will be used
+ * as the peer dependency version for Angular in all release packages.
+ */
+const cdkVersion = '^6.0.0 || ^6.0.0-rc.0';
+
+/**
+ * Required RxJS version for all Angular Layout packages. This version will be used
+ * as the peer dependency version for Angular in all release packages.
+ */
+const rxjsVersion = '^6.0.0-rc.0';
 
 /** License that will be placed inside of all created bundles. */
 const buildLicense = `/**
@@ -27,6 +39,8 @@ const buildLicense = `/**
 module.exports = {
   projectVersion: buildVersion,
   angularVersion: angularVersion,
+  cdkVersion: cdkVersion,
+  rxjsVersion: rxjsVersion,
   projectDir: __dirname,
   packagesDir: join(__dirname, 'src'),
   outputDir: join(__dirname, 'dist'),

docs/documentation/Bazel.md

@@ -0,0 +1,56 @@
+### Building with Bazel
+
+The Angular Layout library, like Angular's Core and Material libraries, can now be built with the Bazel distributed build utility. Full details about Bazel and Angular can be found in the 
+[Angular Core repo](https://github.com/angular/angular/blob/master/docs/BAZEL.md). 
+
+> Bazel supports distributed, incremental builds and testing that are significantly faster than traditional WebPack builds.
+
+Please ensure that you have Bazel installed by following the instructions in that document. This Uncyclo page only serves as a quick reference to building and testing Angular Layout with Bazel.
+
+----
+
+### Installing Bazel
+
+Install Bazel from the distribution, see [install] instructions.
+On Mac, just `brew install bazel`.
+
+Bazel will install a hermetic version of Node, npm, and Yarn when
+you run the first build.
+
+[install]: https://bazel.build/versions/master/docs/install.html
+
+#### Installation of ibazel
+
+Install interactive bazel runner / fs watcher via:
+
+```
+yarn global add @bazel/ibazel
+```
+
+### Building with Bazel
+
+Before building or testing, please run the following command to ensure Bazel tracks all node_modules:
+
+```terminal
+bazel run @nodejs//:npm i
+```
+
+The instructions for **building** with Bazel are:
+
+```terminal
+bazel build ...
+```
+
+The instructions for **testing** with Bazel are:
+
+```terminal
+bazel test ...
+```
+
+### Publishing with Bazel
+
+To publish Flex Layout to NPM with Bazel, run the following command:
+
+```terminal
+bazel run //src/lib:npm_package.publish
+```