Skip to content

Commit c10272a

Browse files
gregmagolanalexeagle
gregmagolan
authored and
alexeagle
committed
feat(examples): angular view engine example (#1252)
1 parent a79c70f commit c10272a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+10719
-2
lines changed

‎.bazelrc

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import %workspace%/common.bazelrc
55
# This lets us glob() up all the files inside the examples to make them inputs to tests
66
# To update these lines, just run `yarn bazel:update-deleted-packages`
77
# (Note, we cannot use common --deleted_packages because the bazel version command doesn't support it)
8-
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
9-
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
8+
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
9+
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
1010

1111
# Mock versioning command to test the --stamp behavior
1212
build --workspace_status_command="echo BUILD_SCM_VERSION 1.2.3"

‎examples/BUILD.bazel

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,39 @@ example_integration_test(
4747
],
4848
)
4949

50+
example_integration_test(
51+
name = "examples_angular_view_engine",
52+
timeout = "long",
53+
npm_packages = {
54+
"//packages/karma:npm_package": "@bazel/karma",
55+
"//packages/protractor:npm_package": "@bazel/protractor",
56+
"//packages/rollup:npm_package": "@bazel/rollup",
57+
"//packages/terser:npm_package": "@bazel/terser",
58+
"//packages/typescript:npm_package": "@bazel/typescript",
59+
},
60+
tags = [
61+
# bazel-in-bazel examples_angular_view_engine fails on ubuntu as the bazelci
62+
# ubuntu docker image is missing shares libs required for the versions
63+
# of chrome and firefox fetched by rules_webtesting. On circleci
64+
# we have the same issue but we can work around it using apt-get.
65+
# on bazelci apt-get fails with permission denied and there is no sudo
66+
# command to switch to root.
67+
# TODO(gregmagolan): figure out how to install the shared libs on bazelci
68+
"no-bazelci-ubuntu",
69+
# bazel-in-bazel examples_angular_view_engine fails on Windows on bazelci cloning a git repo:
70+
# ```
71+
# ERROR: no such package '@io_bazel_rules_k8s//k8s': Traceback (most recent call last):
72+
# 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
73+
# _clone_or_update(ctx)
74+
# 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
75+
# git_repo(ctx, directory)
76+
# ```
77+
# This is most likely due to a memory issue with this large bazel-in-bazel test.
78+
# TODO(gregmagolan): figure out what is broken with the above
79+
"no-bazelci-windows",
80+
],
81+
)
82+
5083
example_integration_test(
5184
name = "examples_app",
5285
npm_packages = {

‎examples/angular_view_engine/.bazelrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import %workspace%/../../common.bazelrc

‎examples/angular_view_engine/BUILD.bazel

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
package(default_visibility = ["//:__subpackages__"])
2+
3+
# ts_library and ng_module use the `//:tsconfig.json` target
4+
# by default. This alias allows omitting explicit tsconfig
5+
# attribute.
6+
alias(
7+
name = "tsconfig.json",
8+
actual = "//src:tsconfig.json",
9+
)

‎examples/angular_view_engine/README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Example Angular application using Bazel
2+
3+
**This is experimental, as part of Angular Labs! There may be breaking changes.**
4+
5+
This is a ViewEngine version of the Angular example at /examples/angular

‎examples/angular_view_engine/WORKSPACE

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
# The WORKSPACE file tells Bazel that this directory is a "workspace", which is like a project root.
2+
# The content of this file specifies all the external dependencies Bazel needs to perform a build.
3+
4+
####################################
5+
# ESModule imports (and TypeScript imports) can be absolute starting with the workspace name.
6+
# The name of the workspace should match the npm package where we publish, so that these
7+
# imports also make sense when referencing the published package.
8+
workspace(
9+
name = "examples_angular_view_engine",
10+
managed_directories = {"@npm": ["node_modules"]},
11+
)
12+
13+
# These rules are built-into Bazel but we need to load them first to download more rules
14+
load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
15+
16+
# Fetch rules_nodejs so we can install our npm dependencies
17+
http_archive(
18+
name = "build_bazel_rules_nodejs",
19+
sha256 = "1447312c8570e8916da0f5f415186e7098cdd4ce48e04b8e864f793c766959c3",
20+
urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/0.38.2/rules_nodejs-0.38.2.tar.gz"],
21+
)
22+
23+
# Fetch sass rules for compiling sass files
24+
http_archive(
25+
name = "io_bazel_rules_sass",
26+
sha256 = "4f05239080175a3f4efa8982d2b7775892d656bb47e8cf56914d5f9441fb5ea6",
27+
strip_prefix = "rules_sass-86ca977cf2a8ed481859f83a286e164d07335116",
28+
url = "https://github.com/bazelbuild/rules_sass/archive/86ca977cf2a8ed481859f83a286e164d07335116.zip",
29+
)
30+
31+
# Check the bazel version and download npm dependencies
32+
load("@build_bazel_rules_nodejs//:index.bzl", "check_bazel_version", "yarn_install")
33+
34+
# Bazel version must be at least the following version because:
35+
# - 0.27.0 Adds managed directories support
36+
check_bazel_version(
37+
message = """
38+
You no longer need to install Bazel on your machine.
39+
Angular has a dependency on the @bazel/bazel package which supplies it.
40+
Try running `yarn bazel` instead.
41+
(If you did run that, check that you've got a fresh `yarn install`)
42+
43+
""",
44+
minimum_bazel_version = "0.27.0",
45+
)
46+
47+
# Setup the Node.js toolchain & install our npm dependencies into @npm
48+
yarn_install(
49+
name = "npm",
50+
package_json = "//:package.json",
51+
yarn_lock = "//:yarn.lock",
52+
)
53+
54+
# Install all bazel dependencies of our npm packages
55+
load("@npm//:install_bazel_dependencies.bzl", "install_bazel_dependencies")
56+
57+
install_bazel_dependencies()
58+
59+
# Load npm_bazel_protractor dependencies
60+
load("@npm_bazel_protractor//:package.bzl", "npm_bazel_protractor_dependencies")
61+
62+
npm_bazel_protractor_dependencies()
63+
64+
# Load npm_bazel_karma dependencies
65+
load("@npm_bazel_karma//:package.bzl", "npm_bazel_karma_dependencies")
66+
67+
npm_bazel_karma_dependencies()
68+
69+
# Setup the rules_webtesting toolchain
70+
load("@io_bazel_rules_webtesting//web:repositories.bzl", "web_test_repositories")
71+
72+
web_test_repositories()
73+
74+
load("@io_bazel_rules_webtesting//web/versioned:browsers-0.3.2.bzl", "browser_repositories")
75+
76+
browser_repositories(
77+
chromium = True,
78+
firefox = True,
79+
)
80+
81+
# Setup the rules_typescript tooolchain
82+
load("@npm_bazel_typescript//:index.bzl", "ts_setup_workspace")
83+
84+
ts_setup_workspace()
85+
86+
# Setup the rules_sass toolchain
87+
load("@io_bazel_rules_sass//sass:sass_repositories.bzl", "sass_repositories")
88+
89+
sass_repositories()
90+
91+
################################
92+
# Support for Remote Execution #
93+
################################
94+
95+
http_archive(
96+
name = "bazel_toolchains",
97+
sha256 = "88e818f9f03628eef609c8429c210ecf265ffe46c2af095f36c7ef8b1855fef5",
98+
strip_prefix = "bazel-toolchains-92dd8a7",
99+
urls = [
100+
"https://github.com/bazelbuild/bazel-toolchains/archive/92dd8a7.zip",
101+
],
102+
)

‎examples/angular_view_engine/angular-metadata.tsconfig.json

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
// WORKAROUND https://github.com/angular/angular/issues/18810
2+
//
3+
// This file is required to run ngc on 3rd party libraries such as @ngrx,
4+
// to write files like node_modules/@ngrx/store/store.ngsummary.json.
5+
//
6+
{
7+
"compilerOptions": {
8+
"lib": [
9+
"dom",
10+
"es2015"
11+
],
12+
"experimentalDecorators": true,
13+
"types": [],
14+
"module": "amd",
15+
"moduleResolution": "node"
16+
},
17+
"angularCompilerOptions": {
18+
"enableSummariesForJit": true
19+
},
20+
"include": [
21+
"node_modules/@angular/**/*",
22+
"node_modules/@ngrx/**/*"
23+
],
24+
"exclude": [
25+
"node_modules/@ngrx/store/migrations/**",
26+
"node_modules/@ngrx/store/schematics/**",
27+
"node_modules/@ngrx/store/schematics-core/**",
28+
"node_modules/@angular/cdk/schematics/**",
29+
"node_modules/@angular/cdk/typings/schematics/**",
30+
"node_modules/@angular/material/schematics/**",
31+
"node_modules/@angular/material/typings/schematics/**",
32+
"node_modules/@angular/common/upgrade*",
33+
"node_modules/@angular/router/upgrade*",
34+
"node_modules/@angular/bazel/**",
35+
"node_modules/@angular/compiler-cli/**",
36+
"node_modules/@angular/**/testing/**"
37+
38+
]
39+
}

‎examples/angular_view_engine/angular.json

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"angular-bazel-example": {
7+
"root": "",
8+
"sourceRoot": "src",
9+
"projectType": "application",
10+
"prefix": "app",
11+
"schematics": {
12+
"@schematics/angular:component": {
13+
"style": "scss"
14+
}
15+
},
16+
"architect": {
17+
"build": {
18+
"builder": "@angular/bazel:build",
19+
"options": {
20+
"targetLabel": "//src:prodapp",
21+
"bazelCommand": "build"
22+
}
23+
},
24+
"serve": {
25+
"builder": "@angular/bazel:build",
26+
"options": {
27+
"targetLabel": "//src:devserver",
28+
"bazelCommand": "run",
29+
"watch": true
30+
},
31+
"configurations": {
32+
"production": {
33+
"targetLabel": "//src:prodserver"
34+
}
35+
}
36+
},
37+
"extract-i18n": {
38+
"builder": "@angular-devkit/build-angular:extract-i18n",
39+
"options": {
40+
"browserTarget": "ngbazel:build"
41+
}
42+
},
43+
"test": {
44+
"builder": "@angular/bazel:build",
45+
"options": {
46+
"bazelCommand": "test",
47+
"targetLabel": "//src/app/..."
48+
}
49+
},
50+
"lint": {
51+
"builder": "@angular-devkit/build-angular:tslint",
52+
"options": {
53+
"tsConfig": [
54+
"src/tsconfig.app.json",
55+
"src/tsconfig.spec.json"
56+
],
57+
"exclude": [
58+
"**/node_modules/**"
59+
]
60+
}
61+
}
62+
}
63+
},
64+
"ngbazel-e2e": {
65+
"root": "e2e/",
66+
"projectType": "application",
67+
"prefix": "",
68+
"architect": {
69+
"e2e": {
70+
"builder": "@angular/bazel:build",
71+
"options": {
72+
"bazelCommand": "test",
73+
"targetLabel": "//e2e:devserver_test"
74+
},
75+
"configurations": {
76+
"production": {
77+
"targetLabel": "//e2e:prodserver_test"
78+
}
79+
}
80+
},
81+
"lint": {
82+
"builder": "@angular-devkit/build-angular:tslint",
83+
"options": {
84+
"tsConfig": "e2e/tsconfig.e2e.json",
85+
"exclude": [
86+
"**/node_modules/**"
87+
]
88+
}
89+
}
90+
}
91+
}
92+
},
93+
"defaultProject": "ngbazel"
94+
95+
}

‎examples/angular_view_engine/e2e/BUILD.bazel

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
load("@npm_bazel_protractor//:index.bzl", "protractor_web_test_suite")
2+
load("@npm_bazel_typescript//:index.bzl", "ts_library")
3+
4+
ts_library(
5+
name = "e2e",
6+
testonly = 1,
7+
srcs = glob(["src/*.ts"]),
8+
tsconfig = "//src:tsconfig-test",
9+
deps = [
10+
"@npm//@types/jasmine",
11+
"@npm//jasmine",
12+
"@npm//protractor",
13+
],
14+
)
15+
16+
protractor_web_test_suite(
17+
name = "prodserver_test",
18+
on_prepare = ":protractor.on-prepare.js",
19+
server = "//src:prodserver",
20+
deps = [":e2e"],
21+
)
22+
23+
protractor_web_test_suite(
24+
name = "devserver_test",
25+
on_prepare = ":protractor.on-prepare.js",
26+
server = "//src:devserver",
27+
deps = [":e2e"],
28+
)

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// The function exported from this file is used by the protractor_web_test_suite.
2+
// It is passed to the `onPrepare` configuration setting in protractor and executed
3+
// before running tests.
4+
//
5+
// If the function returns a promise, as it does here, protractor will wait
6+
// for the promise to resolve before running tests.
7+
8+
const protractorUtils = require('@bazel/protractor/protractor-utils');
9+
const protractor = require('protractor');
10+
const path = require('path');
11+
12+
module.exports = function(config) {
13+
// In this example, `@bazel/protractor/protractor-utils` is used to run
14+
// the server. protractorUtils.runServer() runs the server on a randomly
15+
// selected port (given a port flag to pass to the server as an argument).
16+
// The port used is returned in serverSpec and the protractor serverUrl
17+
// is the configured.
18+
const isProdserver = path.basename(config.server, path.extname(config.server)) === 'prodserver';
19+
return protractorUtils
20+
.runServer(config.workspace, config.server, isProdserver ? '-p' : '-port', [])
21+
.then(serverSpec => {
22+
// Example app is hosted under `/example` in the prodserver and under `/` in devserver
23+
const serverUrl = `http://localhost:${serverSpec.port}` + (isProdserver ? '/example' : '');
24+
protractor.browser.baseUrl = serverUrl;
25+
});
26+
};

0 commit comments

Comments
 (0)