Build angular from source & switch to protractor_web_test_suite for e2e tests

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

@@ -70,10 +70,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,14 @@ alias(
     actual = "@nodejs//:yarn",
 )
 
+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 +21,29 @@ 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/**",
+    ]),
 )

README.md

@@ -89,13 +89,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

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.2.zip"],
+    strip_prefix = "rules_nodejs-0.11.2",
+    sha256 = "c00d5381adeefb56e0ef959a7b168cae628535dab933cfad1c2cd1870cd7c9de",
+)
+
+# 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
@@ -35,9 +43,9 @@ http_archive(
 # Runs the TypeScript compiler
 http_archive(
     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",
+    url = "https://github.com/gregmagolan/rules_typescript/archive/fb559a693dc334e794c432ae3abfbc70a6884408.zip",
+    strip_prefix = "rules_typescript-fb559a693dc334e794c432ae3abfbc70a6884408",
+    sha256 = "265439facb09d3514ed595ff8569a6e991d0ee215ce1d6beb96285fbb47ed2bf",
 )
 
 # Used by the ts_web_test_suite rule to provision browsers
@@ -65,15 +73,17 @@ 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/4cb10748507248bc67991980bb626a6466c4693e.zip",
+    strip_prefix = "angular-4cb10748507248bc67991980bb626a6466c4693e",
+    sha256 = "89f6c6a2b1ac75cc52177b293a9c3070e55c7be68102ee24edb08d76c75d704c",
 )
 
+####################################
+# Tell Bazel about some workspaces that were installed from npm.
+
 # The @rxjs repo contains targets for building rxjs with bazel
 local_repository(
     name = "rxjs",
@@ -108,6 +118,14 @@ 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,30 @@
     "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.0.1",
         "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.0",
+        "@angular/compiler-cli": "6.1.0",
+        "@angular/core": "6.1.0",
         "@bazel/benchmark-runner": "0.1.0",
         "@bazel/ibazel": "0.4.0",
         "@types/jasmine": "2.8.8",
+        "@types/node": "6.0.88",
         "clang-format": "1.2.3",
         "concurrently": "3.6.1",
         "husky": "0.14.3",
+        "protobufjs": "5.0.0",
         "protractor": "5.4.0",
-        "typescript": "2.7.2"
+        "tsutils": "2.20.0",
+        "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

@@ -11,14 +11,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/**"

protractor.conf.js

@@ -12,6 +12,8 @@ ng_module(
     deps = [
         "//src/hello-world",
         "//src/todos",
+        "@angular//packages/core",
+        "@angular//packages/router",
     ],
 )
 
@@ -21,16 +23,17 @@ ts_devserver(
     name = "devserver",
     additional_root_paths = [
         "angular_bazel_example/node_modules/zone.js/dist",
+        "angular_bazel_example/node_modules/tslib",
         "angular_bazel_example/node_modules/@ngrx/store/bundles",
     ],
     entry_module = "angular_bazel_example/src/main",
     scripts = [
         ":require.config.js",
-        "//:angular_bundles",
     ],
     serving_path = "/bundle.min.js",
     static_files = [
         "//:node_modules/zone.js/dist/zone.min.js",
+        "//:node_modules/tslib/tslib.js",
         "//:node_modules/@ngrx/store/bundles/store.umd.min.js",
         "index.html",
     ],

src/BUILD.bazel

@@ -23,6 +23,8 @@ ng_module(
     tsconfig = "//src:tsconfig.json",
     deps = [
         "//src/lib",
+        "@angular//packages/core",
+        "@angular//packages/forms",
         "@rxjs",
     ],
 )
@@ -31,19 +33,28 @@ ts_library(
     name = "test_lib",
     testonly = 1,
     srcs = glob(["*.spec.ts"]),
-    deps = [":hello-world"],
+    deps = [
+        ":hello-world",
+        "@angular//packages/core",
+        "@angular//packages/core/testing",
+        "@angular//packages/platform-browser",
+        "@angular//packages/platform-browser-dynamic/testing",
+    ],
 )
 
 ts_web_test_suite(
     name = "test",
-    bootstrap = ["//:node_modules/zone.js/dist/zone-testing-bundle.js"],
+    srcs = ["//:node_modules/tslib/tslib.js"],
+    # do not sort
+    bootstrap = [
+        "//:node_modules/zone.js/dist/zone-testing-bundle.js",
+        "//:node_modules/reflect-metadata/Reflect.js",
+    ],
     browsers = [
         "@io_bazel_rules_webtesting//browsers:chromium-local",
         "@io_bazel_rules_webtesting//browsers:firefox-local",
     ],
     deps = [
         ":test_lib",
-        "//:angular_bundles",
-        "//:angular_test_bundles",
     ],
 )

src/hello-world/BUILD.bazel

@@ -2,4 +2,4 @@ <h1>Home</h1>
 
 <div>Hello {{ name }}</div>
 
-<input type="text" [value]="name" (input)="name = $event.target.value"/>
+<input type="text" [(ngModel)]="name"/>

src/hello-world/hello-world.component.html

@@ -1,4 +1,3 @@
-import {DebugElement} from '@angular/core';
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';

src/hello-world/hello-world.component.spec.ts

@@ -1,9 +1,11 @@
 import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 
 import {HelloWorldComponent} from './hello-world.component';
 
 @NgModule({
   declarations: [HelloWorldComponent],
+  imports: [FormsModule],
   exports: [HelloWorldComponent],
 })
 export class HelloWorldModule {

src/hello-world/hello-world.module.ts

@@ -1,3 +1,5 @@
+import 'tslib';
+
 import {platformBrowser} from '@angular/platform-browser';
 import {AppModuleNgFactory} from './app.module.ngfactory';
 

src/main.ts

@@ -24,6 +24,9 @@ ng_module(
     deps = [
         "//src/lib",
         "//src/reducers",
+        "@angular//packages/common",
+        "@angular//packages/core",
+        "@angular//packages/forms",
         "@rxjs",
     ],
 )

src/todos/BUILD.bazel

@@ -1,7 +1,24 @@
 load("@build_bazel_rules_typescript//:defs.bzl", "ts_library")
+load("@angular//:index.bzl", "protractor_web_test_suite")
 
 ts_library(
     name = "e2e",
     testonly = 1,
     srcs = glob(["*.ts"]),
 )
+
+protractor_web_test_suite(
+    name = "prodserver_test",
+    data = ["@angular//packages/bazel/src/protractor/utils"],
+    on_prepare = ":protractor.on-prepare.js",
+    server = "//src:prodserver",
+    deps = [":e2e"],
+)
+
+protractor_web_test_suite(
+    name = "devserver_test",
+    data = ["@angular//packages/bazel/src/protractor/utils"],
+    on_prepare = ":protractor.on-prepare.js",
+    server = "//src:devserver",
+    deps = [":e2e"],
+)

test/e2e/BUILD.bazel

@@ -0,0 +1,11 @@
+const protractorUtils = require('@angular/bazel/protractor-utils');
+const protractor = require('protractor');
+
+module.exports = function(config) {
+  const portFlag = config.server.endsWith('prodserver') ? '-p' : '-port';
+  return protractorUtils.runServer(config.workspace, config.server, portFlag, [])
+      .then(serverSpec => {
+        const serverUrl = `http://localhost:${serverSpec.port}`;
+        protractor.browser.baseUrl = serverUrl;
+      });
+};