Build angular from source (#160)

* Build angular from source & switch to protractor_web_test_suite for e2e tests

* Pull rules_typescript from npm (@bazel/typescript package)

* Add comments

* Add comment

* Remove skydoc_repositories() call from WORKSPACE

* Update README

* Address review comments

* Add comment about protractor onPrepare function

* Address review comments

Author: gregmagolan

.circleci/bazel.rc

@@ -23,7 +23,7 @@ build --experimental_repository_cache=/home/circleci/bazel_repository_cache
 
 # Workaround https://github.com/bazelbuild/bazel/issues/3645
 # Bazel doesn't calculate the memory ceiling correctly when running under Docker.
-# Limit Bazel to consuming 3072K of RAM
-build --local_resources=3072,2.0,1.0
+# Limit Bazel to consuming 2560K of RAM
+build --local_resources=2560,1.0,1.0
 # Also limit Bazel's own JVM heap to stay within our 4G container limit
-startup --host_jvm_args=-Xmx2G
+startup --host_jvm_args=-Xmx1g

.circleci/config.yml

@@ -60,7 +60,9 @@ jobs:
       - run: bazel info release
 
       # Install the dependencies from NPM
-      - run: bazel run @nodejs//:yarn install
+      # TODO(gmagolan): Use `bazel run :install` once bootstrap issue resolved.
+      # See https://github.com/bazelbuild/rules_nodejs/issues/275.
+      - run: yarn
 
       # Build and Test
       # Use bazel query so that we explicitly ask for all buildable targets to
@@ -70,10 +72,6 @@ jobs:
 
       # Run the benchmark
       - run: node_modules/.bin/ibazel-benchmark-runner //src:devserver src/hello-world/hello-world.component.ts --url=http://localhost:5432
-
-      # Run the protractor end-to-end test - it's not a Bazel target because
-      # we didn't write a protractor rule yet.
-      - run: xvfb-run -a yarn e2e
 
       - store_artifacts:
           path: dist/bin/src/bundle.min.js

BUILD.bazel

@@ -5,11 +5,17 @@ alias(
     actual = "@nodejs//:yarn",
 )
 
+# ts_library and ng_module use the `//:tsconfig.json` target
+# by default. This alias allows omitting explicit tsconfig
+# attribute.
+alias(
+    name = "tsconfig.json",
+    actual = "//src:tsconfig.json",
+)
+
 # This export allows targets in other packages to reference files that live
 # in this package.
 exports_files([
-    # Let ts_library targets reference the root tsconfig.json file
-    "tsconfig.json",
     # Let devserver and testing targets reference zone.js distro
     "node_modules/zone.js/dist/zone.min.js",
     "node_modules/zone.js/dist/zone-testing-bundle.js",
@@ -18,46 +24,33 @@ exports_files([
 # NOTE: this will move to node_modules/BUILD in a later release
 filegroup(
     name = "node_modules",
-    # NB: rxjs is not in this list, because we build it from sources using the
-    # label @rxjs//:rxjs
+    # NB: angular & rxjs are not in this list, because we build them from sources
     srcs = glob(["/".join([
         "node_modules",
         pkg,
         "**",
         ext,
     ]) for pkg in [
-        "@angular",
         "@ngrx",
         "@types",
+        "bytebuffer",
+        "protobufjs",
         "protractor",
+        "reflect-metadata",
         "tsickle",
+        "tslib",
         "tsutils",
         "typescript",
+        "zone.js",
     ] for ext in [
         "*.js",
         "*.json",
         "*.d.ts",
-    ]]),
-)
-
-ANGULAR_TESTING = [
-    "node_modules/@angular/*/bundles/*-testing.umd.js",
-    # We use AOT, so 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),
+    ]] + [
+        "node_modules/protractor/**",
+    ]) + ["@build_bazel_rules_typescript//:node_modules"],
+    # "@build_bazel_rules_typescript//:node_modules" is incluced
+    # in `//:node_modules` so that npm dependencies that are hoisted to
+    # node_modules/@bazel/typescript/node_modules because of conflicting
+    # versions can be resolved correctly
 )

README.md

@@ -38,14 +38,23 @@ npm install -g @bazel/ibazel
 ## Setup
 
 Before building the app, we install packages, just as with any npm-based development workflow.
-However, to get the same version of the toolchain as co-workers and our continuous integration, let's have Bazel run the
-package manager using a pinned version it manages. You should not even need
-node, npm, or yarn installed on a machine where you develop with Bazel.
 
 ```bash
-$ bazel run :install
+$ yarn install
 ```
 
+or 
+
+```bash
+$ npm install
+```
+
+For the time being, you need to run your locally installed `yarn` or `npm` to install dependencies
+as shown above. This is because we pull down the `@bazel/typescript` bazel dependency from npm and
+that dependency needs to be in place before we can build the project. We're investigating
+how to resolve this bootstrapping issue so in the future you will be able run `bazel run :install` to
+install your npm packages without needing a local installation of `node`, `yarn` or `npm`.
+
 ## Development
 
 Next we'll run the development server:
@@ -68,15 +77,29 @@ is less than two seconds, even for a large application.
 
 Control-C twice to kill the devserver and also stop `ibazel`.
 
-We can also run all the unit tests:
+## Testing
+
+We can also run all the unit and e2e tests:
 
 ```bash
 $ ibazel test ...
 ```
 
-This will run all the tests. In this example, there is a test for the
-`hello-world` component. Note that Bazel will only re-run the tests whose inputs
-changed since the last run.
+This will run all the tests.
+
+In this example, there is a unit test for the `hello-world` component which uses
+the `ts_web_test_suite` rule. There are also protractor e2e tests for both the
+`prodserver` and `devserver` which use the `protractor_web_test_suite` rule.
+
+You can also run these tests individually using,
+
+```bash
+$ bazel test //src/hello-world:test
+$ bazel test //test/e2e:prodserver_test
+$ bazel test //test/e2e:devserver_test
+```
+
+Note that Bazel will only re-run the tests whose inputs changed since the last run.
 
 ## Production
 
@@ -89,14 +112,6 @@ bundlers can be integrated with Bazel.
 $ ibazel run src:prodserver
 ```
 
-We also use Protractor to run end-to-end tests. We don't have a protractor rule
-yet, so we'll take the build results from Bazel and run the test outside of Bazel.
-
-```bash
-$ yarn e2e
-```
-
 ## Coming soon
 
-- Protractor bazel rule
 - Code-splitting and lazy loading (planned for Q2/Q3 2018)

WORKSPACE

@@ -14,9 +14,17 @@ workspace(name = "angular_bazel_example")
 # Allows Bazel to run tooling in Node.js
 http_archive(
     name = "build_bazel_rules_nodejs",
-    urls = ["https://github.com/bazelbuild/rules_nodejs/archive/0.10.0.zip"],
-    strip_prefix = "rules_nodejs-0.10.0",
-    sha256 = "2f77623311da8b5009b1c7eade12de8e15fa3cd2adf9dfcc9f87cb2082b2211f",
+    urls = ["https://github.com/bazelbuild/rules_nodejs/archive/0.11.3.zip"],
+    strip_prefix = "rules_nodejs-0.11.3",
+    sha256 = "e8842fa5f5e38f2c826167ff94323d4b5aabd13217cee867d971d6f860cfd730"
+)
+
+# build_bazel_rules_nodejs depends on skylib
+http_archive(
+    name = "bazel_skylib",
+    urls = ["https://github.com/bazelbuild/bazel-skylib/archive/0.3.1.zip"],
+    strip_prefix = "bazel-skylib-0.3.1",
+    sha256 = "95518adafc9a2b656667bbf517a952e54ce7f350779d0dd95133db4eb5c27fb1",
 )
 
 # The Bazel buildtools repo contains tools like the BUILD file formatter, buildifier
@@ -33,21 +41,32 @@ http_archive(
 )
 
 # Runs the TypeScript compiler
-http_archive(
+local_repository(
     name = "build_bazel_rules_typescript",
-    url = "https://github.com/bazelbuild/rules_typescript/archive/0.15.3.zip",
-    strip_prefix = "rules_typescript-0.15.3",
-    sha256 = "a2b26ac3fc13036011196063db1bf7f1eae81334449201dc28087ebfa3708c99",
+    path = "node_modules/@bazel/typescript",
+)
+
+# build_bazel_rules_typescript depends on io_bazel_skydoc
+http_archive(
+    name = "io_bazel_skydoc",
+    urls = ["https://github.com/bazelbuild/skydoc/archive/0ef7695c9d70084946a3e99b89ad5a99ede79580.zip"],
+    strip_prefix = "skydoc-0ef7695c9d70084946a3e99b89ad5a99ede79580",
+    sha256 = "491f9e142b870b18a0ec8eb3d66636eeceabe5f0c73025706c86f91a1a2acb4d",
 )
 
 # Used by the ts_web_test_suite rule to provision browsers
 http_archive(
     name = "io_bazel_rules_webtesting",
-    # Use a commit SHA because we need a release
-    # https://github.com/bazelbuild/rules_webtesting/issues/273
-    url = "https://github.com/bazelbuild/rules_webtesting/archive/bbfc846d98dacb0fb40dd9173acfe4070e3e0f62.zip",
-    strip_prefix = "rules_webtesting-bbfc846d98dacb0fb40dd9173acfe4070e3e0f62",
-    sha256 = "a79e2d681b7c9ddc51e7974ddb385b9ee2b389cdc823dd3e78e18936337e4c5a",
+    url = "https://github.com/bazelbuild/rules_webtesting/archive/0.2.1.zip",
+    strip_prefix = "rules_webtesting-0.2.1",
+    sha256 = "7d490aadff9b5262e5251fa69427ab2ffd1548422467cb9f9e1d110e2c36f0fa",
+)
+
+# bazel_gazelle is a transitive dep of rules_typescript and rules_webtesting
+http_archive(
+    name = "bazel_gazelle",
+    urls = ["https://github.com/bazelbuild/bazel-gazelle/releases/download/0.13.0/bazel-gazelle-0.13.0.tar.gz"],
+    sha256 = "bc653d3e058964a5a26dcad02b6c72d7d63e6bb88d94704990b908a1445b8758",
 )
 
 # Runs the Sass CSS preprocessor
@@ -65,13 +84,12 @@ http_archive(
     sha256 = "ba79c532ac400cefd1859cbc8a9829346aa69e3b99482cd5a54432092cbc3933",
 )
 
-####################################
-# Tell Bazel about some workspaces that were installed from npm.
-
 # The @angular repo contains rule for building Angular applications
-local_repository(
+http_archive(
     name = "angular",
-    path = "node_modules/@angular/bazel",
+    url = "https://github.com/angular/angular/archive/6.1.2.zip",
+    strip_prefix = "angular-6.1.2",
+    sha256 = "e7553542cebd1113069a92d97a464a2d2aa412242926686653b8cf0101935617",
 )
 
 # The @rxjs repo contains targets for building rxjs with bazel
@@ -83,7 +101,7 @@ local_repository(
 ####################################
 # Load and install our dependencies downloaded above.
 
-load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories", "yarn_install")
+load("@build_bazel_rules_nodejs//:defs.bzl", "node_repositories", "yarn_install")
 
 node_repositories(package_json = ["//:package.json"])
 
@@ -100,14 +118,25 @@ browser_repositories(
     firefox = True,
 )
 
-load("@build_bazel_rules_typescript//:defs.bzl", "ts_setup_workspace")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_setup_workspace", "check_rules_typescript_version")
 
 ts_setup_workspace()
 
+# 0.16.0: tsc_wrapped uses user's typescript version & check_rules_typescript_version
+check_rules_typescript_version("0.16.0")
+
 load("@io_bazel_rules_sass//sass:sass_repositories.bzl", "sass_repositories")
 
 sass_repositories()
 
+#
+# Load and install our dependencies from local repositories
+#
+
+load("@angular//:index.bzl", "ng_setup_workspace")
+
+ng_setup_workspace()
+
 ####################################
 # Setup our local toolchain
 

package.json

@@ -4,38 +4,29 @@
     "description": "Demo of bazel rules for angular",
     "license": "Apache 2.0",
     "dependencies": {
-        "@angular/animations": "6.0.4",
-        "@angular/common": "6.0.4",
-        "@angular/core": "6.0.4",
-        "@angular/forms": "6.0.4",
-        "@angular/platform-browser": "6.0.4",
-        "@angular/router": "6.0.4",
-        "@angular/upgrade": "6.0.4",
         "@ngrx/store": "6.1.0",
         "rxjs": "6.2.2",
+        "tslib": "1.9.3",
         "zone.js": "0.8.26"
     },
     "devDependencies": {
-        "@angular/bazel": "6.0.4",
-        "@angular/compiler": "6.0.4",
-        "@angular/compiler-cli": "6.0.4",
-        "@angular/platform-browser-dynamic": "6.0.4",
+        "@angular/compiler": "6.1.2",
+        "@angular/compiler-cli": "6.1.2",
+        "@angular/core": "6.1.2",
         "@bazel/benchmark-runner": "0.1.0",
         "@bazel/ibazel": "0.4.0",
+        "@bazel/typescript": "0.16.0",
         "@types/jasmine": "2.8.8",
+        "@types/node": "6.0.88",
         "clang-format": "1.2.3",
-        "concurrently": "3.6.1",
         "husky": "0.14.3",
         "protractor": "5.4.0",
-        "typescript": "2.7.2"
+        "tsickle": "0.32.1",
+        "typescript": "2.9.1"
     },
     "scripts": {
-        "postinstall": "concurrently \"webdriver-manager update $CHROMEDRIVER_VERSION_ARG\" \"ngc -p postinstall.tsconfig.json\"",
+        "postinstall": "ngc -p postinstall.tsconfig.json",
         "serve": "ibazel run //src:devserver",
-        "pree2e": "bazel build test/...",
-        "e2e": "yarn e2e-prodserver && yarn e2e-devserver",
-        "e2e-prodserver": "concurrently \"bazel run //src:prodserver\" \"while ! nc -z 127.0.0.1 5432; do sleep 1; done && protractor\" --kill-others --success first",
-        "e2e-devserver": "concurrently \"bazel run //src:devserver\" \"while ! nc -z 127.0.0.1 5432; do sleep 1; done && protractor\" --kill-others --success first",
         "prebuildifier": "bazel build @com_github_bazelbuild_buildtools//buildifier",
         "buildifier": "note: working around https://github.com/alexeagle/angular-bazel-example/issues/60",
         "buildifier": "find . -type f \\( -name BUILD -or -name BUILD.bazel \\) ! -path \"./node_modules/*\" | xargs $(bazel info bazel-bin)/external/com_github_bazelbuild_buildtools/buildifier/*/buildifier",

postinstall.tsconfig.json

@@ -1,6 +1,18 @@
 // WORKAROUND https://github.com/angular/angular/issues/18810
-// This file is required to run ngc on angular and other libraries,
-// to write files like node_modules/@angular/core/core.ngsummary.json
+//
+// This file is required to run ngc on 3rd party libraries such as @ngrx,
+// to write files like node_modules/@ngrx/store/store.ngsummary.json.
+//
+// Using ngc to create generated files is sufficient as long
+// as there are no components or directives in the 3rd party library
+// that are used. If there are, then there is an existing issue where
+// components & modules that use these 3rd party components or directives
+// can't be tested with ts_web_test_suite().
+// See https://github.com/bazelbuild/rules_typescript/issues/192
+//
+// The work-around for this right now is to compile the 3rd party
+// from source using Bazel so that Bazel is used to create
+// its generated files.
 {
     "compilerOptions": {
         "lib": [
@@ -11,14 +23,9 @@
         "types": []
     },
     "include": [
-        "node_modules/@angular/**/*",
         "node_modules/@ngrx/**/*"
     ],
     "exclude": [
-        "node_modules/@angular/bazel/**",
-        "node_modules/@angular/compiler-cli/**",
-        "node_modules/@angular/tsc-wrapped/**",
-        "node_modules/@angular/*/testing/**",
         "node_modules/@ngrx/store/migrations/**",
         "node_modules/@ngrx/store/schematics/**",
         "node_modules/@ngrx/store/schematics-core/**"