Skip to content

Commit

Permalink
feat(examples): angular view engine example (#1252)
Browse files Browse the repository at this point in the history
  • Loading branch information
gregmagolan authored and alexeagle committed Oct 9, 2019
1 parent a79c70f commit c10272a
Show file tree
Hide file tree
Showing 65 changed files with 10,719 additions and 2 deletions.
4 changes: 2 additions & 2 deletions .bazelrc
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
33 changes: 33 additions & 0 deletions examples/BUILD.bazel
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
1 change: 1 addition & 0 deletions examples/angular_view_engine/.bazelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
import %workspace%/../../common.bazelrc
9 changes: 9 additions & 0 deletions examples/angular_view_engine/BUILD.bazel
Original file line number Diff line number Diff line change
@@ -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",
)
5 changes: 5 additions & 0 deletions examples/angular_view_engine/README.md
Original file line number Diff line number Diff line change
@@ -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
102 changes: 102 additions & 0 deletions examples/angular_view_engine/WORKSPACE
Original file line number Diff line number Diff line change
@@ -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",
],
)
39 changes: 39 additions & 0 deletions examples/angular_view_engine/angular-metadata.tsconfig.json
Original file line number Diff line number Diff line change
@@ -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/**"

]
}
95 changes: 95 additions & 0 deletions examples/angular_view_engine/angular.json
Original file line number Diff line number Diff line change
@@ -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"

}
28 changes: 28 additions & 0 deletions examples/angular_view_engine/e2e/BUILD.bazel
Original file line number Diff line number Diff line change
@@ -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"],
)
26 changes: 26 additions & 0 deletions examples/angular_view_engine/e2e/protractor.on-prepare.js
Original file line number Diff line number Diff line change
@@ -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;
});
};
16 changes: 16 additions & 0 deletions examples/angular_view_engine/e2e/src/app.e2e-spec.ts
Original file line number Diff line number Diff line change
@@ -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...!`);
});
});
Loading

0 comments on commit c10272a

Please sign in to comment.