feat(examples): add Angular ViewEngine example that uses new rollup_bundle

.bazelrc

@@ -5,8 +5,8 @@ import %workspace%/common.bazelrc
 # This lets us glob() up all the files inside the examples to make them inputs to tests
 # To update these lines, just run `yarn bazel:update-deleted-packages`
 # (Note, we cannot use common --deleted_packages because the bazel version command doesn't support it)
-build --deleted_packages=examples/angular,examples/angular/e2e,examples/angular/src/app/hello-world,examples/angular/src/app/todos/reducers,examples/angular/src/app/todos,examples/angular/src/app/home,examples/angular/src/app,examples/angular/src/shared/material,examples/angular/src/assets,examples/angular/src/example,examples/angular/src,examples/angular/src/lib/shorten,examples/angular/tools,examples/app,examples/app/styles,examples/app/test,examples/closure,examples/kotlin,examples/nestjs,examples/nestjs/src,examples/parcel,examples/protocol_buffers,examples/user_managed_deps,examples/vendored_node_and_yarn,examples/vendored_node,examples/webapp,examples/web_testing,examples/worker,e2e/bazel_managed_deps,e2e/fine_grained_symlinks,e2e/jasmine,e2e/karma,e2e/karma_stack_trace,e2e/karma_stack_trace/test_folder,e2e/karma_typescript,e2e/node_loader_no_preserve_symlinks,e2e/node_loader_preserve_symlinks,e2e/packages,e2e/symlinked_node_modules_npm,e2e/symlinked_node_modules_yarn,e2e/ts_auto_deps,e2e/ts_devserver,e2e/ts_devserver/genrule,e2e/ts_devserver/subpackage,e2e/typescript,e2e/webapp,e2e/webpack
-query --deleted_packages=examples/angular,examples/angular/e2e,examples/angular/src/app/hello-world,examples/angular/src/app/todos/reducers,examples/angular/src/app/todos,examples/angular/src/app/home,examples/angular/src/app,examples/angular/src/shared/material,examples/angular/src/assets,examples/angular/src/example,examples/angular/src,examples/angular/src/lib/shorten,examples/angular/tools,examples/app,examples/app/styles,examples/app/test,examples/closure,examples/kotlin,examples/nestjs,examples/nestjs/src,examples/parcel,examples/protocol_buffers,examples/user_managed_deps,examples/vendored_node_and_yarn,examples/vendored_node,examples/webapp,examples/web_testing,examples/worker,e2e/bazel_managed_deps,e2e/fine_grained_symlinks,e2e/jasmine,e2e/karma,e2e/karma_stack_trace,e2e/karma_stack_trace/test_folder,e2e/karma_typescript,e2e/node_loader_no_preserve_symlinks,e2e/node_loader_preserve_symlinks,e2e/packages,e2e/symlinked_node_modules_npm,e2e/symlinked_node_modules_yarn,e2e/ts_auto_deps,e2e/ts_devserver,e2e/ts_devserver/genrule,e2e/ts_devserver/subpackage,e2e/typescript,e2e/webapp,e2e/webpack
+build --deleted_packages=examples/angular,examples/angular/e2e,examples/angular/src/app/hello-world,examples/angular/src/app/todos/reducers,examples/angular/src/app/todos,examples/angular/src/app/home,examples/angular/src/app,examples/angular/src/shared/material,examples/angular/src/assets,examples/angular/src/example,examples/angular/src,examples/angular/src/lib/shorten,examples/angular/tools,examples/angular_view_engine,examples/angular_view_engine/e2e,examples/angular_view_engine/src/app/hello-world,examples/angular_view_engine/src/app/todos/reducers,examples/angular_view_engine/src/app/todos,examples/angular_view_engine/src/app/home,examples/angular_view_engine/src/app,examples/angular_view_engine/src/shared/material,examples/angular_view_engine/src/assets,examples/angular_view_engine/src/example,examples/angular_view_engine/src,examples/angular_view_engine/src/lib/shorten,examples/angular_view_engine/tools,examples/app,examples/app/styles,examples/app/test,examples/closure,examples/kotlin,examples/nestjs,examples/nestjs/src,examples/parcel,examples/protocol_buffers,examples/user_managed_deps,examples/vendored_node_and_yarn,examples/vendored_node,examples/webapp,examples/web_testing,examples/worker,e2e/bazel_managed_deps,e2e/fine_grained_symlinks,e2e/jasmine,e2e/karma,e2e/karma_stack_trace,e2e/karma_stack_trace/test_folder,e2e/karma_typescript,e2e/node_loader_no_preserve_symlinks,e2e/node_loader_preserve_symlinks,e2e/packages,e2e/symlinked_node_modules_npm,e2e/symlinked_node_modules_yarn,e2e/ts_auto_deps,e2e/ts_devserver,e2e/ts_devserver/genrule,e2e/ts_devserver/subpackage,e2e/typescript,e2e/webapp,e2e/webpack
+query --deleted_packages=examples/angular,examples/angular/e2e,examples/angular/src/app/hello-world,examples/angular/src/app/todos/reducers,examples/angular/src/app/todos,examples/angular/src/app/home,examples/angular/src/app,examples/angular/src/shared/material,examples/angular/src/assets,examples/angular/src/example,examples/angular/src,examples/angular/src/lib/shorten,examples/angular/tools,examples/angular_view_engine,examples/angular_view_engine/e2e,examples/angular_view_engine/src/app/hello-world,examples/angular_view_engine/src/app/todos/reducers,examples/angular_view_engine/src/app/todos,examples/angular_view_engine/src/app/home,examples/angular_view_engine/src/app,examples/angular_view_engine/src/shared/material,examples/angular_view_engine/src/assets,examples/angular_view_engine/src/example,examples/angular_view_engine/src,examples/angular_view_engine/src/lib/shorten,examples/angular_view_engine/tools,examples/app,examples/app/styles,examples/app/test,examples/closure,examples/kotlin,examples/nestjs,examples/nestjs/src,examples/parcel,examples/protocol_buffers,examples/user_managed_deps,examples/vendored_node_and_yarn,examples/vendored_node,examples/webapp,examples/web_testing,examples/worker,e2e/bazel_managed_deps,e2e/fine_grained_symlinks,e2e/jasmine,e2e/karma,e2e/karma_stack_trace,e2e/karma_stack_trace/test_folder,e2e/karma_typescript,e2e/node_loader_no_preserve_symlinks,e2e/node_loader_preserve_symlinks,e2e/packages,e2e/symlinked_node_modules_npm,e2e/symlinked_node_modules_yarn,e2e/ts_auto_deps,e2e/ts_devserver,e2e/ts_devserver/genrule,e2e/ts_devserver/subpackage,e2e/typescript,e2e/webapp,e2e/webpack
 
 # Mock versioning command to test the --stamp behavior
 build --workspace_status_command="echo BUILD_SCM_VERSION 1.2.3"

examples/BUILD.bazel

@@ -47,6 +47,39 @@ example_integration_test(
     ],
 )
 
+example_integration_test(
+    name = "examples_angular_view_engine",
+    timeout = "long",
+    npm_packages = {
+        "//packages/karma:npm_package": "@bazel/karma",
+        "//packages/protractor:npm_package": "@bazel/protractor",
+        "//packages/rollup:npm_package": "@bazel/rollup",
+        "//packages/terser:npm_package": "@bazel/terser",
+        "//packages/typescript:npm_package": "@bazel/typescript",
+    },
+    tags = [
+        # bazel-in-bazel examples_angular_view_engine fails on ubuntu as the bazelci
+        # ubuntu docker image is missing shares libs required for the versions
+        # of chrome and firefox fetched by rules_webtesting. On circleci
+        # we have the same issue but we can work around it using apt-get.
+        # on bazelci apt-get fails with permission denied and there is no sudo
+        # command to switch to root.
+        # TODO(gregmagolan): figure out how to install the shared libs on bazelci
+        "no-bazelci-ubuntu",
+        # bazel-in-bazel examples_angular_view_engine fails on Windows on bazelci cloning a git repo:
+        # ```
+        # ERROR: no such package '@io_bazel_rules_k8s//k8s': Traceback (most recent call last):
+        # 	File "D:/b/ftxm343s/execroot/build_bazel_rules_nodejs/_tmp/3726d3573001cb4068a18af89eb255de/_bazel_b/ktluxf26/external/bazel_tools/tools/build_defs/repo/git.bzl", line 163
+        # 		_clone_or_update(ctx)
+        # 	File "D:/b/ftxm343s/execroot/build_bazel_rules_nodejs/_tmp/3726d3573001cb4068a18af89eb255de/_bazel_b/ktluxf26/external/bazel_tools/tools/build_defs/repo/git.bzl", line 36, in _clone_or_update
+        # 		git_repo(ctx, directory)
+        # ```
+        # This is most likely due to a memory issue with this large bazel-in-bazel test.
+        # TODO(gregmagolan): figure out what is broken with the above
+        "no-bazelci-windows",
+    ],
+)
+
 example_integration_test(
     name = "examples_app",
     npm_packages = {

examples/angular_view_engine/.bazelrc

@@ -0,0 +1 @@
+import %workspace%/../../common.bazelrc

examples/angular_view_engine/BUILD.bazel

@@ -0,0 +1,9 @@
+package(default_visibility = ["//:__subpackages__"])
+
+# 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",
+)

examples/angular_view_engine/README.md

@@ -0,0 +1,5 @@
+# Example Angular application using Bazel
+
+**This is experimental, as part of Angular Labs! There may be breaking changes.**
+
+This is a ViewEngine version of the Angular example at /examples/angular

examples/angular_view_engine/WORKSPACE

@@ -0,0 +1,102 @@
+# The WORKSPACE file tells Bazel that this directory is a "workspace", which is like a project root.
+# The content of this file specifies all the external dependencies Bazel needs to perform a build.
+
+####################################
+# ESModule imports (and TypeScript imports) can be absolute starting with the workspace name.
+# The name of the workspace should match the npm package where we publish, so that these
+# imports also make sense when referencing the published package.
+workspace(
+    name = "examples_angular_view_engine",
+    managed_directories = {"@npm": ["node_modules"]},
+)
+
+# These rules are built-into Bazel but we need to load them first to download more rules
+load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
+
+# Fetch rules_nodejs so we can install our npm dependencies
+http_archive(
+    name = "build_bazel_rules_nodejs",
+    sha256 = "1447312c8570e8916da0f5f415186e7098cdd4ce48e04b8e864f793c766959c3",
+    urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/0.38.2/rules_nodejs-0.38.2.tar.gz"],
+)
+
+# Fetch sass rules for compiling sass files
+http_archive(
+    name = "io_bazel_rules_sass",
+    sha256 = "4f05239080175a3f4efa8982d2b7775892d656bb47e8cf56914d5f9441fb5ea6",
+    strip_prefix = "rules_sass-86ca977cf2a8ed481859f83a286e164d07335116",
+    url = "https://github.com/bazelbuild/rules_sass/archive/86ca977cf2a8ed481859f83a286e164d07335116.zip",
+)
+
+# Check the bazel version and download npm dependencies
+load("@build_bazel_rules_nodejs//:index.bzl", "check_bazel_version", "yarn_install")
+
+# Bazel version must be at least the following version because:
+#   - 0.27.0 Adds managed directories support
+check_bazel_version(
+    message = """
+You no longer need to install Bazel on your machine.
+Angular has a dependency on the @bazel/bazel package which supplies it.
+Try running `yarn bazel` instead.
+    (If you did run that, check that you've got a fresh `yarn install`)
+
+""",
+    minimum_bazel_version = "0.27.0",
+)
+
+# Setup the Node.js toolchain & install our npm dependencies into @npm
+yarn_install(
+    name = "npm",
+    package_json = "//:package.json",
+    yarn_lock = "//:yarn.lock",
+)
+
+# Install all bazel dependencies of our npm packages
+load("@npm//:install_bazel_dependencies.bzl", "install_bazel_dependencies")
+
+install_bazel_dependencies()
+
+# Load npm_bazel_protractor dependencies
+load("@npm_bazel_protractor//:package.bzl", "npm_bazel_protractor_dependencies")
+
+npm_bazel_protractor_dependencies()
+
+# Load npm_bazel_karma dependencies
+load("@npm_bazel_karma//:package.bzl", "npm_bazel_karma_dependencies")
+
+npm_bazel_karma_dependencies()
+
+# Setup the rules_webtesting toolchain
+load("@io_bazel_rules_webtesting//web:repositories.bzl", "web_test_repositories")
+
+web_test_repositories()
+
+load("@io_bazel_rules_webtesting//web/versioned:browsers-0.3.2.bzl", "browser_repositories")
+
+browser_repositories(
+    chromium = True,
+    firefox = True,
+)
+
+# Setup the rules_typescript tooolchain
+load("@npm_bazel_typescript//:index.bzl", "ts_setup_workspace")
+
+ts_setup_workspace()
+
+# Setup the rules_sass toolchain
+load("@io_bazel_rules_sass//sass:sass_repositories.bzl", "sass_repositories")
+
+sass_repositories()
+
+################################
+# Support for Remote Execution #
+################################
+
+http_archive(
+    name = "bazel_toolchains",
+    sha256 = "88e818f9f03628eef609c8429c210ecf265ffe46c2af095f36c7ef8b1855fef5",
+    strip_prefix = "bazel-toolchains-92dd8a7",
+    urls = [
+        "https://github.com/bazelbuild/bazel-toolchains/archive/92dd8a7.zip",
+    ],
+)

examples/angular_view_engine/angular-metadata.tsconfig.json

@@ -0,0 +1,39 @@
+// WORKAROUND https://github.com/angular/angular/issues/18810
+//
+// 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.
+//
+{
+  "compilerOptions": {
+      "lib": [
+          "dom",
+          "es2015"
+      ],
+      "experimentalDecorators": true,
+      "types": [],
+      "module": "amd",
+      "moduleResolution": "node"
+  },
+  "angularCompilerOptions": {
+      "enableSummariesForJit": true
+  },
+  "include": [
+      "node_modules/@angular/**/*",
+      "node_modules/@ngrx/**/*"
+  ],
+  "exclude": [
+      "node_modules/@ngrx/store/migrations/**",
+      "node_modules/@ngrx/store/schematics/**",
+      "node_modules/@ngrx/store/schematics-core/**",
+      "node_modules/@angular/cdk/schematics/**",
+      "node_modules/@angular/cdk/typings/schematics/**",
+      "node_modules/@angular/material/schematics/**",
+      "node_modules/@angular/material/typings/schematics/**",
+      "node_modules/@angular/common/upgrade*",
+      "node_modules/@angular/router/upgrade*",
+      "node_modules/@angular/bazel/**",
+      "node_modules/@angular/compiler-cli/**",
+      "node_modules/@angular/**/testing/**"
+
+  ]
+}

examples/angular_view_engine/angular.json

@@ -0,0 +1,95 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular-bazel-example": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "architect": {
+        "build": {
+          "builder": "@angular/bazel:build",
+          "options": {
+            "targetLabel": "//src:prodapp",
+            "bazelCommand": "build"
+          }
+        },
+        "serve": {
+          "builder": "@angular/bazel:build",
+          "options": {
+            "targetLabel": "//src:devserver",
+            "bazelCommand": "run",
+            "watch": true
+          },
+          "configurations": {
+            "production": {
+              "targetLabel": "//src:prodserver"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "ngbazel:build"
+          }
+        },
+        "test": {
+          "builder": "@angular/bazel:build",
+          "options": {
+            "bazelCommand": "test",
+            "targetLabel": "//src/app/..."
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "ngbazel-e2e": {
+      "root": "e2e/",
+      "projectType": "application",
+      "prefix": "",
+      "architect": {
+        "e2e": {
+          "builder": "@angular/bazel:build",
+          "options": {
+            "bazelCommand": "test",
+            "targetLabel": "//e2e:devserver_test"
+          },
+          "configurations": {
+            "production": {
+              "targetLabel": "//e2e:prodserver_test"
+            }
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": "e2e/tsconfig.e2e.json",
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "ngbazel"
+
+}

examples/angular_view_engine/e2e/BUILD.bazel

@@ -0,0 +1,28 @@
+load("@npm_bazel_protractor//:index.bzl", "protractor_web_test_suite")
+load("@npm_bazel_typescript//:index.bzl", "ts_library")
+
+ts_library(
+    name = "e2e",
+    testonly = 1,
+    srcs = glob(["src/*.ts"]),
+    tsconfig = "//src:tsconfig-test",
+    deps = [
+        "@npm//@types/jasmine",
+        "@npm//jasmine",
+        "@npm//protractor",
+    ],
+)
+
+protractor_web_test_suite(
+    name = "prodserver_test",
+    on_prepare = ":protractor.on-prepare.js",
+    server = "//src:prodserver",
+    deps = [":e2e"],
+)
+
+protractor_web_test_suite(
+    name = "devserver_test",
+    on_prepare = ":protractor.on-prepare.js",
+    server = "//src:devserver",
+    deps = [":e2e"],
+)

examples/angular_view_engine/e2e/protractor.on-prepare.js

@@ -0,0 +1,26 @@
+// The function exported from this file is used by the protractor_web_test_suite.
+// It is passed to the `onPrepare` configuration setting in protractor and executed
+// before running tests.
+//
+// If the function returns a promise, as it does here, protractor will wait
+// for the promise to resolve before running tests.
+
+const protractorUtils = require('@bazel/protractor/protractor-utils');
+const protractor = require('protractor');
+const path = require('path');
+
+module.exports = function(config) {
+  // In this example, `@bazel/protractor/protractor-utils` is used to run
+  // the server. protractorUtils.runServer() runs the server on a randomly
+  // selected port (given a port flag to pass to the server as an argument).
+  // The port used is returned in serverSpec and the protractor serverUrl
+  // is the configured.
+  const isProdserver = path.basename(config.server, path.extname(config.server)) === 'prodserver';
+  return protractorUtils
+      .runServer(config.workspace, config.server, isProdserver ? '-p' : '-port', [])
+      .then(serverSpec => {
+        // Example app is hosted under `/example` in the prodserver and under `/` in devserver
+        const serverUrl = `http://localhost:${serverSpec.port}` + (isProdserver ? '/example' : '');
+        protractor.browser.baseUrl = serverUrl;
+      });
+};

examples/angular_view_engine/e2e/src/app.e2e-spec.ts

@@ -0,0 +1,16 @@
+import {AppPage} from './app.po';
+
+describe('angular example application', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display: Hello World!', async () => {
+    await page.navigateTo();
+    expect(await page.getParagraphText()).toEqual(`Hello Adolph Blain...`);
+    await page.typeInInput('!');
+    expect(await page.getParagraphText()).toEqual(`Hello Adolph Blain...!`);
+  });
+});