Skip to content
This repository has been archived by the owner on Mar 20, 2024. It is now read-only.

Build angular from source #160

Merged
merged 9 commits into from
Aug 9, 2018
Merged

Build angular from source #160

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6e8c236
Build angular from source & switch to protractor_web_test_suite for e…
gregmagolan Jun 25, 2018
6de71ac
Pull rules_typescript from npm (@bazel/typescript package)
gregmagolan Aug 8, 2018
c8a7ad5
Add comments
gregmagolan Aug 9, 2018
8acae88
Add comment
gregmagolan Aug 9, 2018
7cdb988
Remove skydoc_repositories() call from WORKSPACE
gregmagolan Aug 9, 2018
10c5167
Update README
gregmagolan Aug 9, 2018
450cc66
Address review comments
gregmagolan Aug 9, 2018
ea8b30b
Add comment about protractor onPrepare function
gregmagolan Aug 9, 2018
c27ed2e
Address review comments
gregmagolan Aug 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions .circleci/bazel.rc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
7 changes: 2 additions & 5 deletions .circleci/config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,8 @@ 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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

file an issue to reference here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

which repo?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

bazel-contrib/rules_nodejs#275

- run: yarn

# Build and Test
# Use bazel query so that we explicitly ask for all buildable targets to
Expand All @@ -70,10 +71,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
Expand Down
46 changes: 18 additions & 28 deletions BUILD.bazel
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,14 @@ alias(
actual = "@nodejs//:yarn",
)

alias(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe a comment that this is the place ts_library will look by default, allows us to omit explicit tsconfig attributes?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

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",
Expand All @@ -18,46 +21,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
)
47 changes: 31 additions & 16 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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

Expand All @@ -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)
70 changes: 51 additions & 19 deletions WORKSPACE
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -83,10 +101,13 @@ 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", "check_rules_nodejs_version")

node_repositories(package_json = ["//:package.json"])

# 0.11.3: proper module resolution & check_rules_nodejs_version
check_rules_nodejs_version("0.11.3")
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't check_rules_typescript_version do this for us?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It can and it does as well in ts_setup_workspace. Would you rather not have it checked here?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah users shouldn't need to do transitive checks


load("@io_bazel_rules_go//go:def.bzl", "go_rules_dependencies", "go_register_toolchains")

go_rules_dependencies()
Expand All @@ -100,14 +121,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

Expand Down
27 changes: 9 additions & 18 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
21 changes: 14 additions & 7 deletions postinstall.tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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": [
Expand All @@ -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/**"
Expand Down
Loading