Giter VIP home page Giter VIP logo

angular-bazel-example's Introduction

CircleCI

Readme content is preserved below to avoid breaking links

This is experimental, as part of Angular Labs! There may be breaking changes.

This is part of the ABC project. The overall goal is to make it possible to develop Angular applications the same way we do at Google.

Learn more about Bazel and Angular at https://bazel.angular.io

This example is deployed at https://bazel.angular.io/example

Guide to the example

This example is a monorepo, meant to show many different features and integrations that we expect are generally useful for enterprise use cases.

  • Angular CLI: you can use the ng command to run build, serve, test, and e2e
  • Angular Libraries: to maximize build incrementality, each Angular module is compiled as a separate step. This lets us re-use Angular libraries without having to publish them as npm packages. See src/todos for a typical NgModule compiled as a library for use in the application, using the ng_module rule in the BUILD.bazel file.
  • TypeScript Libraries: see src/lib for a trivial example of a pure-TS library that's consumed in the application, using the ts_library rule in the BUILD.bazel file.
  • Sass: we use Sass for all styling. Angular components import Sass files, and these are built by Bazel as independent processes calling the modern Sass compiler (written in Dart).
  • Material design: see src/material where we collect the material modules we use.
  • Redux-style state management: see src/reducers where we use the NgRx Store.
  • Lazy loading: in production mode, the application is served in chunks. Run ng serve --prod
  • Differential loading: in production mode, we load a pair of <script> tags. Modern browsers will load code in the ES2015 syntax, which is smaller and requires fewer polyfills. Older browsers will load ES5 syntax.
  • Docker: see below where we package up the production app for deployment on Kubernetes.

Installation

You only need to install one build tool, and which one you choose typically depends on what kind of development you do most often.

If you're a frontend developer, you should install NodeJS and yarn. The package.json file has an engines section which indicates the range of NodeJS and yarn versions that you could use. You simply run yarn commands shown below, and don't need to install Bazel or any other dependencies.

If you're a full-stack developer, you might be using Bazel for your backend already. In this case, you should install Bazel following instructions at http://bazel.build. Also install ibazel, which is a watch mode for Bazel not included in the standard distribution. See https://github.com/bazelbuild/bazel-watcher#installation. The WORKSPACE file has a check_bazel_version call which will print an error if your Bazel version is not in the supported range. You simply run bazel commands shown below, and don't need to install NodeJS, yarn, or any other dependencies.

Development

First we'll run the development server:

$ ng serve
# or
$ ibazel run //src:devserver

This runs in "watch mode", which means it will watch any files that are inputs to the devserver, and when they change it will ask Bazel to re-build them. When the re-build is finished, it will trigger a LiveReload in the browser.

This command prints a URL on the terminal. Open that page to see the demo app running. Now you can edit one of the source files (src/lib/file.ts is an easy one to understand and see the effect). As soon as you save a change, the app should refresh in the browser with the new content. Our intent is that this time is less than two seconds, even for a large application.

Control-C twice to kill the devserver.

Testing

We can also run all the unit tests:

$ ng test
# or
$ bazel test //src/...

Or run the end-to-end tests:

$ ng e2e
# or
$ bazel test //e2e/...

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.

Note that Bazel will only re-run the tests whose inputs changed since the last run.

Production

We can run the application in production mode, where the code has been bundled and optimized. This can be slower than the development mode, because any change requires re-optimizing the app. This example uses Rollup and Uglify, but other bundlers can be integrated with Bazel.

$ ng serve --prod
# or
$ bazel run //src:prodserver

Code splitting

The production bundle is code split and routes such as / and /todos are lazy loaded. Code splitting is handled by the rollup_bundle rule which now supports the new code splitting feature in rollup.

Note: code splitting is not supported in development mode yet so the //src:devserver target does not serve a code split bundle. The dynamic import() statements will resolve to modules that are served in the initial JS payload.

Npm dependencies

Having a local node_modules folder setup by yarn or npm is not necessary when building this example with Bazel. This example makes use of Bazel managed npm dependencies (https://github.com/bazelbuild/rules_nodejs#using-bazel-managed-dependencies) which means Bazel will setup the npm dependencies in your package.json for you outside of your local workspace for use in the build.

However, you may still want to run yarn or npm to manually setup a local node_modules folder for editor and tooling support.

Deployment

Firebase

We use the standard firebase deploy command.

Run yarn deploy to release changes to bazel.angular.io.

Kubernetes Engine

We use Bazel's docker support to package up our production server for deployment. Each time the app changes, we'll get a slim new docker layer with just the modified files, keeping the round-trip for deployment incremental and fast. This example is configured to run on Google Kubernetes Engine, so we can have an elastic pool of backend machines behind a load balancer. This setup is more expensive to operate than something like Firebase Functions where the backend code is spun up on-demand, but is also more adaptable to scenarios like backend servers that need to run other binaries on the machine.

The application is currently live at http://35.197.115.230/

To run it under docker:

$ bazel run src:nodejs_image -- --norun
$ docker run --rm -p 8080:8080 bazel/src:nodejs_image

Deploy to production:

  1. Install gcloud and kubectl
  2. Authenticate to the Google Container Registry gcloud auth configure-docker
  3. Authenticate to Kubernetes Engine gcloud container clusters get-credentials angular-bazel-example --zone=us-west1-a
  4. For the first deployment: bazel run :deploy.create
  5. To update: bazel run :deploy.replace

Tips:

# Run the binary without docker
$ bazel run src:nodejs_image.binary
 # What's in the image?
$ bazel build src:nodejs_image && file-roller dist/bin/src/nodejs_image-layer.tar
 # Tear down all running docker containers
$ docker rm -f $(docker ps -aq)
 # Hop into the running image on kubernetes
$ kubectl exec angular-bazel-example-prod-3285254973-ncv3g  -it -- /bin/bash

angular-bazel-example's People

Contributors

alexeagle avatar chrislovecnm avatar gregmagolan avatar manekinekko avatar meistert avatar mgechev avatar renovate-bot avatar renovate[bot] avatar thelgevold avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

angular-bazel-example's Issues

Unit tests failure

$ ibazel test ... failed with:

/tmp/angular-bazel-example $ node_modules/.bin/ibazel test ...
WARNING: no ibazel version found in your node_modules.
        We recommend installing a devDependency on ibazel so you use the same
        version as other engineers on this project.
        Using the globally installed version at /tmp/angular-bazel-example/node_modules/@bazel/ibazel
State: QUERY
Querying for BUILD files...
Error watching file /tmp/angular-bazel-example/tools/defaults/BUILD
Error: no such file or directory
Watching: 6 files
Querying for source files...
Watching: 5264 files
State: RUN
Testing ...
INFO: Analysed 19 targets (0 packages loaded).
INFO: Found 18 targets and 1 test target...
FAIL: //src/hello-world:test (see /home/user/.cache/bazel/_bazel_user/a3cee343d71b0f2101c79d88606a48aa/execroot/angular_bazel_example/bazel-out/k8-dbg/testlogs/src/hello-world/test/test.log)
INFO: From Testing //src/hello-world:test:
==================== Test output for //src/hello-world:test:
/home/user/.cache/bazel/_bazel_user/a3cee343d71b0f2101c79d88606a48aa/execroot/angular_bazel_example/bazel-out/k8-dbg/bin/src/hello-world/test.runfiles/angular_bazel_example/src/hello-world/test: line 26: start: command not found
================================================================================
INFO: Elapsed time: 3.797s, Critical Path: 2.39s
INFO: Build completed, 1 test FAILED, 2 total actions
//src/hello-world:test                                                   FAILED in 2.4s
  /home/user/.cache/bazel/_bazel_user/a3cee343d71b0f2101c79d88606a48aa/execroot/angular_bazel_example/bazel-out/k8-dbg/testlogs/src/hello-world/test/test.log

Executed 1 out of 1 test: 1 fails locally.
Build error: exit status 3
State: WAIT

The test.log says:

exec ${PAGER:-/usr/bin/less} "$0" || exit 1
-----------------------------------------------------------------------------
/home/user/.cache/bazel/_bazel_user/a3cee343d71b0f2101c79d88606a48aa/execroot/angular_bazel_example/bazel-out/k8-dbg/bin/src/hello-world/test.runfiles/angular_bazel_example/src/hello-world/test: line 26: start: command not found

ibazel run src:devserver and ibazel run src:prodserver both work fine in the same environment.

tsconfig paths

Looks like tsconfig paths don't work.
Idea: Using global paths like src/service instead of ../../../../../../service
tsconfig provides the ability:

{
  "compilerOptions": {
    "lib": [
      "dom",
      "es5",
      "es2015.collection",
      "es2015.iterable",
      "es2015.promise"
    ],
    "paths": {
      "src/*": [
        "./*"
      ]
    },
    "experimentalDecorators": true
  }
}

And usually, it works. But I get the error when try to use it in ABC

import { HelloWorldModule } from 'src/hello-world/hello-world.module';

ERROR: /home/webdevelopland/ABC/src/BUILD.bazel:5:1: Compiling Angular templates (ngc) //src:src failed (Exit 1)
src/angular.module.ts(4,34): error TS2307: Cannot find module 'src/hello-world/hello-world.module'.

Compiling TypeScript on Windows fails

Moving forward without SASS I get the following:
Action failed to execute: java.io.IOException: CreateProcess(): %1 is not a valid Win32 application

C:\Users\gbown\Documents\bazel-angular\angular-bazel-example>bazel build src --verbose_failures
INFO: Found 1 target...
ERROR: C:/users/gbown/appdata/local/temp/bazel_gbown/afpn2gxi/external/build_bazel_rules_typescript/internal/tsc_wrapped/BUILD.bazel:26:1: Compiling TypeScript (devmode) @build
zel_rules_typescript//internal/tsc_wrapped:tsc_wrapped failed (Exit -1). Note: Remote connection/protocol failed with: execution failed: tsc failed: error executing command
cd C:/users/gbown/appdata/local/temp/_bazel_gbown/afpn2gxi/execroot/main
bazel-out/host/bin/external/build_bazel_rules_typescript/internal/tsc_wrapped/tsc -p bazel-out/host/bin/external/build_bazel_rules_typescript/internal/tsc_wrapped/tsc_wrapped_es5
sconfig.json.
Action failed to execute: java.io.IOException: CreateProcess(): %1 is not a valid Win32 application.
Target //src:src failed to build

Windows support

The whole example should work on Windows, verified by testing on CI.

Issues with @io_bazel_rules_webtesting on Google Cloud Build

Hi, I'm trying to build xlayers (this branch) with bazel. I've applied the changes following the wiki guide.

The build is running in a Docker container (Dockerfile), and the pipeline is driven by Cloud Build (cloudbuild.yaml).

I've only tested the build locally using the command:

cloud-build-local --dryrun=false --config=cloudbuild.yaml .

Here is the error I'm getting:

ERROR: /builder/home/.cache/bazel/_bazel_root/eab0d61a99b6696edb3d2aff87b585e8/external/io_bazel_rules_webtesting/third_party/firefox/BUILD.bazel:25:1: no such package '@org_mozilla_firefox//file': The repository could not be resolved and referenced by '@io_bazel_rules_webtesting//third_party/firefox:firefox'
Step #1: ERROR: Analysis of target '//src:test_firefox-local' failed; build aborted: Analysis failed

Here is the full log:

2018/09/12 23:20:25 Warning: The server docker version installed (18.06.1-ce) is different from the one used in GCB (17.12.0-ce)
2018/09/12 23:20:25 Warning: The client docker version installed (18.06.1-ce) is different from the one used in GCB (17.12.0-ce)
Using default tag: latest
latest: Pulling from cloud-builders/metadata
4fe2ade4980c: Pull complete
7531e0524d7d: Pull complete
Digest: sha256:40e76c18fd788513367f99959a35c6affbe32668c3f8627d419c1375c9dabf03
Status: Downloaded newer image for gcr.io/cloud-builders/metadata:latest
2018/09/12 23:22:37 Started spoofed metadata server
2018/09/12 23:22:37 Build id = localbuild_fa20b655-2cee-4bd7-a380-8ed9a14f0f01
2018/09/12 23:22:37 status changed to "BUILD"
BUILD
Starting Step #0
Step #0: Already have image (with digest): gcr.io/cloud-builders/bazel
Step #0: Extracting Bazel installation...
Step #0: Starting local Bazel server and connecting to it...
Step #0: Loading:
Step #0: Loading: 0 packages loaded
Step #0: Loading: 0 packages loaded
Step #0: Loading: 0 packages loaded
Step #0: Loading: 0 packages loaded
Step #0: Loading: 0 packages loaded
Step #0: Loading: 0 packages loaded
Step #0: Loading: 0 packages loaded
Step #0: Loading: 0 packages loaded
Step #0: Loading: 0 packages loaded
Step #0: Analyzing: target @yarn//:yarn (1 packages loaded)
Step #0: Analyzing: target @yarn//:yarn (3 packages loaded)
Step #0: Analyzing: target @yarn//:yarn (3 packages loaded)
Step #0: INFO: Analysed target @yarn//:yarn (4 packages loaded).
Step #0: INFO: Found 1 target...
Step #0: [0 / 1] [-----] BazelWorkspaceStatusAction stable-status.txt
Step #0: INFO: Elapsed time: 23.869s, Critical Path: 0.03s
Step #0: INFO: 0 processes.
Step #0: INFO: Build completed successfully, 1 total action
Step #0: INFO: Running command line: /builder/home/.cache/bazel/_bazel_root/eab0d61a99b6696edb3d2aff87b585e8/external/nodejs/bin/yarn_node_repositories
Step #0: INFO: Build completed successfully, 1 total action
Step #0: Running yarn --cwd /workspace
Step #0: yarn install v1.3.2
Step #0: [1/4] Resolving packages...
Step #0: [2/4] Fetching packages...
Step #0: info [email protected]: The platform "linux" is incompatible with this module.
Step #0: info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
Step #0: [3/4] Linking dependencies...
Step #0: warning " > @angular/[email protected]" has unmet peer dependency "rxjs@^6.0.0".
Step #0: warning " > @angular/[email protected]" has unmet peer dependency "rxjs@^6.0.0".
Step #0: warning " > @angular/[email protected]" has unmet peer dependency "rxjs@^6.0.0".
Step #0: warning " > @angular/[email protected]" has unmet peer dependency "rxjs@^6.0.0".
Step #0: warning " > @angular/[email protected]" has unmet peer dependency "rxjs@^6.0.0".
Step #0: warning " > @ngxs/[email protected]" has unmet peer dependency "rxjs@>=6.0.0 || ^5.6.0-forward-compat.4".
Step #0: warning " > [email protected]" has unmet peer dependency "rxjs@^6.0.0".
Step #0: warning "@angular-devkit/build-angular > @ngtools/[email protected]" has incorrect peer dependency "typescript@~2.4.0 || ~2.5.0 || ~2.6.0 || ~2.7.0".
Step #0: warning "@angular-devkit/build-angular > mini-css-extract-plugin > schema-utils > [email protected]" has unmet peer dependency "ajv@>=5.0.0".
Step #0: warning "@angular/bazel > @bazel/typescript > [email protected]" has incorrect peer dependency "typescript@>=2.4.2 <2.6".
Step #0: warning " > @ngxs/[email protected]" has unmet peer dependency "rxjs@>=6.0.0 || ^5.6.0-forward-compat.4".
Step #0: warning " > @ngxs/[email protected]" has unmet peer dependency "rxjs@>=6.0.0 || ^5.6.0-forward-compat.4".
Step #0: warning " > [email protected]" has unmet peer dependency "tslib@^1.7.1".
Step #0: [4/4] Building fresh packages...
Step #0: success Saved lockfile.
Step #0: Done in 49.72s.
Finished Step #0
Starting Step #1
Step #1: Already have image (with digest): gcr.io/cloud-builders/bazel
Step #1: Starting local Bazel server and connecting to it...
Step #1: Loading:
Step #1: Loading: 0 packages loaded
Step #1: Loading: 0 packages loaded
Step #1:     currently loading:
Step #1: Loading: 1 packages loaded
Step #1:     currently loading:  ... (2 packages)
Step #1: Analyzing: 11 targets (3 packages loaded)
Step #1: Analyzing: 11 targets (6 packages loaded)
Step #1: Analyzing: 11 targets (29 packages loaded)
Step #1: Analyzing: 11 targets (32 packages loaded)
Step #1: Analyzing: 11 targets (44 packages loaded)
Step #1: Analyzing: 11 targets (53 packages loaded)
Step #1: Analyzing: 11 targets (57 packages loaded)
Step #1: Analyzing: 11 targets (57 packages loaded)
Step #1: Analyzing: 11 targets (57 packages loaded)
Step #1: Analyzing: 11 targets (57 packages loaded)
Step #1: Analyzing: 11 targets (57 packages loaded)
Step #1: Analyzing: 11 targets (57 packages loaded)
Step #1: Analyzing: 11 targets (61 packages loaded)
Step #1: Analyzing: 11 targets (61 packages loaded)
Step #1: Analyzing: 11 targets (61 packages loaded)
Step #1: Analyzing: 11 targets (72 packages loaded)
Step #1: ERROR: /builder/home/.cache/bazel/_bazel_root/eab0d61a99b6696edb3d2aff87b585e8/external/io_bazel_rules_webtesting/third_party/firefox/BUILD.bazel:25:1: no such package '@org_mozilla_firefox//file': The repository could not be resolved and referenced by '@io_bazel_rules_webtesting//third_party/firefox:firefox'
Step #1: ERROR: Analysis of target '//src:test_firefox-local' failed; build aborted: Analysis failed
Step #1: INFO: Elapsed time: 162.801s
Step #1: INFO: 0 processes.
Step #1: FAILED: Build did NOT complete successfully (80 packages loaded)
Step #1: FAILED: Build did NOT complete successfully (80 packages loaded)
Finished Step #1
2018/09/12 23:27:18 status changed to "ERROR"
ERROR
ERROR: build step 1 "gcr.io/cloud-builders/bazel" failed: exit status 1
2018/09/12 23:27:33 Build finished with ERROR status

Enable prod mode

As of right now Bazel does not yet emit an indication of whether prod or dev mode should be use. Thus src/main.ts only uses dev mode. We should do something to give the app an indication of whether it should enable prod

Error when Angular component defined in separate Bazel package from the NgModule

In discussion on #87, I outlined an example project structure that might make sense for some Bazel Angular projects. But when I tried to implement it, I got a build error about Unexpected value 'ComponentA[...]' declared by the module 'FooModule[...]'. Please add a @Pipe/@Directive/@Component annotation. As you can see in the repro at master...pshields:example-project-layout , the components do have Component annotations. I think they must be getting stripped when the ts_library is built. Is this a bug? I would think the decorator should be preserved so that a component defined in a ts_library can be used in a separately-defined ng_module.

Issues with angularfire2 (Angular + Firebase integration) and devserver

Hey Alex, I have been having trouble adding the angularfire2 package (Google-maintained, Firebase-related Angular modules) as a dependency to my app and getting it to serve from the devserver correctly.

I thought the basic steps would be to add the relevant *.umd.js files to the scripts argument of ts_devserver, but that appears to cause the following requirejs error: Uncaught Error: Mismatched anonymous define() module: function (exports,_angular_core,firebase,rxjs_scheduler_queue) { 'use strict';.

I'm not really sure what I need to be doing to troubleshoot this. Do you have any advice? I'm not sure if the issue is with my code, or with the devserver, or with the angularfire2 package.

I've created a repro at #55.

Router

How to install @angular/router to ABC?
after installation by npm: npm i @angular/router --save
I tried to add it to yarn: bazel run @yarn//:yarn
But the error comes:

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
ERROR: Non-zero return code '1' from command: Process exited with status 1

ts_web_test incompatible with modules importing BrowserModule

Take a look at this commit: mrmeku@0d0f6a7

In it you'll find a test for AppModule. The test passes successfully as when the import of BrowserModule is commented out. If you uncomment out the import statement the test fails with the following output:

exec ${PAGER:-/usr/bin/less} "$0" || exit 1
-----------------------------------------------------------------------------
๏ฟฝ[32m09 03 2018 00:17:41.863:INFO [karma]: ๏ฟฝ[39mKarma v1.7.1 server started at http://0.0.0.0:9876/
๏ฟฝ[32m09 03 2018 00:17:41.866:INFO [launcher]: ๏ฟฝ[39mLaunching browser ChromeHeadless with unlimited concurrency
๏ฟฝ[32m09 03 2018 00:17:41.884:INFO [launcher]: ๏ฟฝ[39mStarting browser ChromeHeadless
๏ฟฝ[32m09 03 2018 00:17:42.564:INFO [HeadlessChrome 64.0.3282 (Mac OS X 10.13.3)]: ๏ฟฝ[39mConnected on socket yLJHPiwmQ-IejY07AAAA with id 28742177
HeadlessChrome 64.0.3282 (Mac OS X 10.13.3) ERROR: 'There is no timestamp for /base/angular_bazel_example/node_modules/@angular/common/common.ngsummary.js!'

๏ฟฝ[33m09 03 2018 00:17:42.985:WARN [web-server]: ๏ฟฝ[39m404: /base/angular_bazel_example/node_modules/@angular/common/common.ngsummary.js
๏ฟฝ[33m09 03 2018 00:17:42.986:WARN [web-server]: ๏ฟฝ[39m404: /base/angular_bazel_example/node_modules/@angular/core/core.ngsummary.js
๏ฟฝ[33m09 03 2018 00:17:42.987:WARN [web-server]: ๏ฟฝ[39m404: /base/angular_bazel_example/node_modules/@angular/platform-browser/platform-browser.ngsummary.js
HeadlessChrome 64.0.3282 (Mac OS X 10.13.3) ERROR: 'There is no timestamp for /base/angular_bazel_example/node_modules/@angular/core/core.ngsummary.js!'

HeadlessChrome 64.0.3282 (Mac OS X 10.13.3) ERROR: 'There is no timestamp for /base/angular_bazel_example/node_modules/@angular/platform-browser/platform-browser.ngsummary.js!'

HeadlessChrome 64.0.3282 (Mac OS X 10.13.3) ERROR
  Script error.
  at :0:0

The most obvious potential fix for this bug is to build angular from source rather than relying on the ngsummary files generated by ngc -p angular.tsconfig.json as is done currently.

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Preset name not found within published preset config (monorepo:angularmaterial). Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Example of using closure_js_binary to bundle an Angular application?

Hi Alex! I'm attempting to develop some applications on the Angular+Bazel+Closure stack, and I'm running into the issue of lacking a build rule to produce the JS application bundle. I see from the wiki's "Coming soon" section that there will soon be "a production bundling/optimizing rule that generates a distribution of the app (or library)". Is the plan to modify the closure_js_binary rule to support that? Can you share a little bit more about what needs to be done to get that working?

The current issue I'm running into when I try to use the closure_js_binary rule is that when I add an ng_module target as a dependency, I get ERROR: [...] 'app_module' does not have mandatory providers: 'closure_js_library'. I notice a similar error occurs when I check out the closure_js_binary branch of this example repository and attempt to build //src:prod_bundle.

It's exciting to be able to build on this stack. Thanks for the contributions you're making to make it possible.

`bazel test ...` fails

$ bazel test ...
ERROR: error loading package 'src': Encountered error while reading extension file 'index.bzl': no such package '@angular//': /private/var/tmp/_bazel_martinprobst/6565aa5348e1552321ec53205cdc77e2/external/angular must be an existing directory
INFO: Elapsed time: 5.370s
FAILED: Build did NOT complete successfully (1 packages loaded)
    currently loading:  ... (4 packages)
ERROR: Couldn't start the build. Unable to run tests

Maybe because I hadn't run yarn yet? It's pretty cryptic though.

Q: npm eg ?

i use npm for this time, can i just replace //yarn:yarn to //npm ?

Unable to import library from node_modules

One of our apps uses @angular/material, but due to angular/components#9502 we can't currently build this with Bazel. A newer app is attempting to use VMware's Clarity.

I get different errors when trying to reproduce this, it seems that the ng_module rule doesn't include ngfactory.js files as action inputs.

Error: Could not resolve ./clr-angular.ngfactory from /private/var/tmp/_bazel_matt/33fa3ed25498f03fdeb092569b0649b6/sandbox/darwin-sandbox/5/execroot/haystack/node_modules/@clr/angular/clr-angular.d.ts

Changing ng_module.bzl to include them allows the app to build, but causes the devserver to not be able to find the file, as I guess there is now a requirement for it to be served.
What is the right way to import libraries using the ng_module rules? The example repo shows the use of ngrx, but this doesn't have references to the ngfactory as part of the ngsummary.

Not sure if I should be opening issue against this repo or the angular one, happy to make an issue over there if needed.

Error: too many open files in system

Fail to run the example on macOS Mojave 10.14 Beta (18A347e) with the following output:

$ ibazel run src:devserver
Error getting Bazel info Bazel info returned a non key-value pair
Querying for files to watch...
Error watching file /Users/wayou/Documents/dev/github/angular-bazel-example/node_modules/core-js/modules/es7.symbol.async-iterator.js
Error: too many open files in system
Error watching file /Users/wayou/Documents/dev/github/angular-bazel-example/node_modules/@angular/core/esm2015/src/view/errors.js
Error: too many open files in system
Error watching file /Users/wayou/Documents/dev/github/angular-bazel-example/node_modules/resolve/test/subdirs.js
Error: too many open files in system
Error watching file /Users/wayou/Documents/dev/github/angular-bazel-example/node_modules/rxjs/_esm2015/internal/operators/bufferTime.js
Error: too many open files in system
Error watching file /Users/wayou/Documents/dev/github/angular-bazel-example/node_modules/@angular/core/src/error_handler.d.ts
...

Changing the kernal.macfiles helps but I wonder if that's the correct approach, or there's any other workarounds?

$ sudo sysctl -w kern.maxfiles=20480
kern.maxfiles: 12288 -> 20480

Getting Function calls are not supported in decorators error

Trying to learn by building on to this example. If I import a module where .forRoot() is required, I get the error message "Function calls are not supported in decorators." Is this a limitation of the current angular/bazel implementation or am I missing something?

src:prodserver fails with when using: --nolegacy_external_runfiles

Using bazel version 0.16.0 on commit e5560ae bazel run --nolegacy_external_runfiles //src:prodserver fails to launch. The root issue appears to be issue in the nodejs rules and how they resolve paths, but I wanted to start in this project in case I missed something.

Here is a full reproduction:

$ yarn install
...
$ bazel run --nolegacy_external_runfiles //src:prodserver
INFO: Analysed target //src:prodserver (0 packages loaded).
INFO: Found 1 target...
Target //src:prodserver up-to-date:
  dist/bin/src/prodserver_bin.sh
  dist/bin/src/prodserver
INFO: Elapsed time: 0.450s, Critical Path: 0.01s
INFO: 0 processes.
INFO: Build completed successfully, 1 total action
INFO: Build completed successfully, 1 total action
/home/jlisee/.cache/bazel/_bazel_jlisee/a3cee343d71b0f2101c79d88606a48aa/execroot/angular_bazel_example/bazel-out/k8-fastbuild/bin/src/prodserver: line 139: source: filename argument required
source: usage: source filename [arguments]

From my digging it looks like the way paths our resolved in the nodejs rules it needs runtree layout like:

prodserver.runfiles/nodejs/bin/nodejs/bin/node
prodserver.runfiles/nodejs/bin/node
prodserver.runfiles/__main__/external/nodejs/bin/nodejs/bin/node
prodserver.runfiles/__main__/external/nodejs/bin/node

(EDIT NOTE fixed example path below)

Instead of just (which you get with the nolegacy flag) note the lack of __main__/external

prodserver.runfiles/nodejs/bin/nodejs/bin/node
prodserver.runfiles/nodejs/bin/node

Consider adding renovate to pin and track dependencies

Thank you for an amazing work!

Just a very random suggestion but it might be a good idea to add Renovate to automatically pin package.json dependencies to specific versions and PR for new ones once they are released.

I know that inside Google it works way better and you depend directly on master but outside of it it might be useful to know that all tests still pass even with the latest version of typescript for example or the latest version of rxjs the same day they are out

Feel free to brutally close this issue :)

Live reload works only once

Hello,

I am trying to run the example app but have a problem with live reload. When I run

ibazel run src:devserver

everything is compiling fine and I can see the app, then if I do any change it recompiles and refreshes the browser but after that first change if I do any other change, it doesn't trigger refresh and recompilation, what I see in the terminal is:

State: WAIT
[live reload] websocket: close 1001 (going away)
connected

I am not sure if I am doing something wrong or if there is any known issue.
I am using:

macOS 10.13.3
node: 8.9.1
-------------
โžœ  angular-bazel-example git:(master) โœ— bazel version  
Build label: 0.10.0-homebrew
Build target: bazel-out/darwin-opt/bin/src/main/java/com/google/devtools/build/lib/bazel/BazelServer_deploy.jar
Build time: Wed Jan 10 02:02:06 +50057 (1517480013726)
Build timestamp: 1517480013726
Build timestamp as int: 1517480013726

Thanks

Problem moving files into subfolder

I tried moving everything into a subfolder called angular_example, made some path changes through the BUILD files and almost succeeded in running the dev server. Here is the current output.

Querying for BUILD files...
Error watching file /Users/mtsgrd/source/monorepo/tools/defaults/BUILD
Error: lstat /Users/mtsgrd/source/monorepo/tools/defaults/BUILD: no such file or directory
Watching: 6 files
Querying for source files...
Watching: 5261 files
State: RUN
Runing //angular_example/src:devserver
Launching with notifications
listening on :35729
INFO: Analysed target //angular_example/src:devserver (0 packages loaded).
INFO: Found 1 target...
ERROR: /Users/mtsgrd/source/monorepo/angular_example/src/hello-world/BUILD.bazel:16:1: Compiling Angular templates (ngc) //angular_example/src/hello-world:hello-world failed (Exit 1): ngc-wrapped failed: error executing command
  (cd /private/var/tmp/_bazel_mtsgrd/c497ef0042011738f4af5219885a8824/execroot/se_zaver_repo && \
  exec env - \
  bazel-out/host/bin/external/angular/src/ngc-wrapped/ngc-wrapped '--node_options=--expose-gc' @@bazel-out/darwin-fastbuild/bin/angular_example/src/hello-world/hello-world_es5_tsconfig.json)

Use --sandbox_debug to see verbose messages from the sandbox
failed to load main  Error: Cannot find module '@angular/compiler-cli/index'
  looked in:
   @angular/compiler-cli/index,
   /private/var/tmp/_bazel_mtsgrd/...```

Just as a side note, another thing I had to do was to add an alias from //:npm_modules to //angular_example:npm_modules since it seems code outside of this repo expects that location.

Can anyone help me interpret what the above means?

ibazel not a devDependency, and when installed still issues a warning

if I run yarn serve, I get:

$ yarn serve
yarn run v1.10.1
$ ibazel run //src:devserver
WARNING: no ibazel version found in your node_modules.
        We recommend installing a devDependency on ibazel so you use the same
        version as other engineers on this project.
        Using the globally installed version at /Users/iminar/.config/yarn/global/node_modules/@bazel/ibazel

If I try to fix this via yarn add --dev @bazel/ibazel I still get the following warning:

$ yarn serve
yarn run v1.10.1
$ ibazel run //src:devserver
WARNING: no ibazel version found in your node_modules.
        We recommend installing a devDependency on ibazel so you use the same
        version as other engineers on this project.
        Using the globally installed version at /Users/iminar/Development/angular-bazel-example/node_modules/@bazel/ibazel

I'd expect:

  • the repo to come with @bazel/ibazel in the devDependencies
  • yarn serve not to issue the warning when ibazel is installed locally

husky post-install hook uses system node

commit 8650aac
Date: Thu Feb 15 13:59:33 2018 -0500

$ bazel run @yarn//:yarn
............................................................
INFO: Analysed target @yarn//:yarn (13 packages loaded).
INFO: Found 1 target...
Target @yarn//:yarn up-to-date:
  dist/bin/external/yarn/yarn
INFO: Elapsed time: 33.908s, Critical Path: 0.19s
INFO: Build completed successfully, 1 total action

INFO: Running command line: dist/bin/external/yarn/yarn
yarn install v1.3.2
warning package.json: License should be a valid SPDX license expression
warning [email protected]: License should be a valid SPDX license expression
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > @angular/[email protected]" has incorrect peer dependency "@angular/[email protected]".
[4/4] Building fresh packages...
error /tmp/angular-bazel-example/node_modules/husky: Command failed.
Exit code: 127
Command: node ./bin/install.js
Arguments:
Directory: /tmp/angular-bazel-example/node_modules/husky
Output:
/bin/sh: 1: node: not found
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
ERROR: Non-zero return code '1' from command: Process exited with status 1

Add example of AngularJS with ngUpgrade

Hi,

I'm currently working on a project where I have to build an AngularJS project with Bazel. Doesn't seem like it, but I'm curious to know if ABC is compatible w/ AngularJS 1.6.

Thank you in advance

rules_typescript doesn't give an error when used with a wrong version of rules_nodejs

ERROR: /usr/local/google/home/jelbourn/material2/src/cdk/keycodes/BUILD.bazel:5:1: Compiling TypeScript (devmode) //src/cdk/keycodes:keycodes failed (Exit 1)
Compilation failed TypeError: global.gc is not a function
    at Socket.<anonymous> (/usr/local/google/home/jelbourn/.cache/bazel/_bazel_jelbourn/2010aad45cf3f55bb7127948064a6254/execroot/angular_material_src/bazel-out/host/bin/external/build_bazel_rules_typescript/internal/tsc_wrapped/worker.js:122:28)
    at emitNone (events.js:86:13)
    at Socket.emit (events.js:185:7)
    at emitReadable_ (_stream_readable.js:432:10)
    at emitReadable (_stream_readable.js:426:7)
    at readableAddChunk (_stream_readable.js:187:13)
    at Socket.Readable.push (_stream_readable.js:134:10)
    at Pipe.onread (net.js:551:20)
Target //src/lib/core:core failed to build
Use --verbose_failures to see the command lines of failed build steps.
INFO: Elapsed time: 0.379s, Critical Path: 0.07s
FAILED: Build did NOT complete successfully

I encounter this error only sometimes when building the cdk/keycodes target:

package(default_visibility=["//visibility:public"])
load("@build_bazel_rules_typescript//:defs.bzl", "ts_library")

ts_library(
  name = "keycodes",
  srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
  module_name = "@angular/cdk/keycodes",
  deps = [],
  tsconfig = ":tsconfig-build.json",
)

If I bazel clean and rebuild it goes away, but then sneaks back at some point- I'm not sure what triggers it

error message when missing resource under ng_module should suggest adding to assets

Hi Alex,
I read your answer about templateUrl in Tracking issue: Angular, Bazel, and Closure (ABC) #19058
templateurl-answer

But it doesn't work for me:
abc-templateurl-error

INFO: Analysed target //src:devserver (0 packages loaded).
INFO: Found 1 target...
ERROR: /home/locked/Documents/bootstrap/storage/nodejs/ABC-test/src/hello-world/BUILD.bazel:16:1: Compiling Angular templates (ngc) //src/hello-world:hello-world failed (Exit 1)
: Couldn't resolve resource ./hello-world.component.html from /home/locked/.cache/bazel/_bazel_locked/04371b4e354c316eda352185c1a7abef/bazel-sandbox/2455399387462227982/execroot/an
gular_bazel_example/src/hello-world/hello-world.component.ts

Target //src:devserver failed to build
Use --verbose_failures to see the command lines of failed build steps.
INFO: Elapsed time: 6.217s, Critical Path: 4.08s
FAILED: Build did NOT complete successfully
ERROR: Build failed. Not running target
Error starting process: fork/exec /tmp/bazel_script_path059461791: permission denied
Run start failed fork/exec /tmp/bazel_script_path059461791: permission denied
Triggering live reload
requesting reload: reload
State: WAIT

What I do wrong?

Windows: cannot clone build_bazel_rules_nodejs git repo

I have installed bazel on windows and successfully built windows, java and python hello world examples found here

When attempting to build angular example, there seems to be something missing?

ERROR: error loading package '': Encountered error while reading extension file 'defs.bzl': no such package '@build_bazel_rules_nodejs//': Traceback (most rec
        File "C:/users/gbown/appdata/local/temp/_bazel_gbown/afpn2gxi/external/bazel_tools/tools/build_defs/repo/git.bzl", line 67
                _clone_or_update(ctx)
        File "C:/users/gbown/appdata/local/temp/_bazel_gbown/afpn2gxi/external/bazel_tools/tools/build_defs/repo/git.bzl", line 42, in _clone_or_update
                fail(("error cloning %s:\n%s" % (ctx....)))
error cloning build_bazel_rules_nodejs:
+ cd C:/users/gbown/appdata/local/temp/_bazel_gbown/afpn2gxi/external
/bin/bash: line 2: cd: C:/users/gbown/appdata/local/temp/_bazel_gbown/afpn2gxi/external: No such file or directory
+ cd C:/users/gbown/appdata/local/temp/_bazel_gbown/afpn2gxi/external/build_bazel_rules_nodejs
/bin/bash: line 7: cd: C:/users/gbown/appdata/local/temp/_bazel_gbown/afpn2gxi/external/build_bazel_rules_nodejs: No such file or directory

Any direction welcome

Thank you
Greg

Nodejs 9+

My colleague tried to launch the example on mac with nodejs v9.3.0. And he got an error.
But works well with v8.9.4

WARNING: You are likely using a version of node-tar or npm that is incompatible with this version of Node.js.
Please use either the version of npm that is bundled with Node.js, or a version of npm (> 5.5.1 or < 5.4.0) or node-tar (> 4.0.1) that is compatible with Node.js 9 and above.

bazel run :install cannot find yarn

As far as I can tell from the README, it should be possible to check out the repo and run bazel run :install. This fails for me.

Failure output

โฏ bazel run :install
Extracting Bazel installation...
...............
INFO: Analysed target //:install (14 packages loaded).
INFO: Found 1 target...
Target @yarn//:yarn up-to-date:
  dist/bin/external/yarn/yarn
INFO: Elapsed time: 27.996s, Critical Path: 0.05s
INFO: Build completed successfully, 4 total actions
INFO: Running command line: dist/bin/external/yarn/yarn
src/main/tools/process-wrapper-legacy.cc:58: "execvp(/home/leo/.cache/bazel/_baz
el_leo/0ee795e57e2ed4de712377959bcf956c/execroot/angular_bazel_example/bazel-out
/k8-fastbuild/bin/external/yarn/yarn, ...)": No such file or directory
ERROR: Non-zero return code '1' from command: Process exited with status 1

Is there something else I need to do before running bazel run :install?

Commit / version info

โฏ git rev-parse HEAD
22fe079b7d9125eca1e325736c7d401fb8aec559
โฏ bazel version
Build label: 0.10.1- (@non-git)
Build target: bazel-out/k8-opt/bin/src/main/java/com/google/devtools/build/lib/bazel/BazelServer_deploy.jar
Build time: Sat Nov 2 00:00:00 +11968 (315532800000)
Build timestamp: 315532800000
Build timestamp as int: 315532800000

Updating git_repository non-semver tags

Recently, the semver tags in WORKSPACE were changed to hashes by @gregmagolan w/ @alexeagle:

image

This essentially disables Renovate's ability to keep them up-to-date because the existing logic was based on semver updates, e.g. v0.7.1 to v0.7.2, etc. Do you have any new logic you'd like to follow? e.g. attempt to reverse the hash back to a release version if there is an existing one, etc?

Alternatively, can these be converted to http_archives pointing to GitHub where you get the benefit of human-readable semvers in the URL + verification via sha256?

image

Your platform/architecture combination NaN is not yet supported. Windows 10

Hello

build works, however cannot start devserver

$ ./node_modules/.bin/ibazel run src:devserver
FATAL: Your platform/architecture combination NaN is not yet supported.
    Follow install instructions at https://github.com/bazelbuild/bazel-watcher/blob/master/README.md to compile for your system.

Could you suggest workaround?

Thank you

errors while using ibazel

Freshly installed bazel and ibazel and run bazel run @yarn//:yarn all seems OK exit code 0

Problem come when I want run things with ibazel like
image

am i doing something wrong ?

On Windows, the path to build directories is incorrect

On windows, it appears that the paths are incorrect in bazel and thus error Not a file.
This occurs on both install and build as documented below. Please let me know if there is a configuration flag I can add to prevent this. Any suggestions are welcome.

Thanks again Alex. I really appreciate the work you are doing on both bazel and closure compiler build tools.

Greg

bazel run @yarn//:yarn ERROR: no such package '@yarn//': Traceback (most recent call last): File "C:/users/gbown/appdata/local/temp/_bazel_gbown/afpn2gxi/external/build_bazel_rules_nodejs/internal/node_install.bzl", line 89 ctx.file("yarn.sh", ("#!/bin/bash" + "".joi...])), ...) File "C:/users/gbown/appdata/local/temp/_bazel_gbown/afpn2gxi/external/build_bazel_rules_nodejs/internal/node_install.bzl", line 89, in ctx.file "".join(["\nROOT=\"$(dirname \"{}\")\"\n...]) File "C:/users/gbown/appdata/local/temp/_bazel_gbown/afpn2gxi/external/build_bazel_rules_nodejs/internal/node_install.bzl", line 89, in "".join "\nROOT=\"$(dirname \"{}\")\"\nNODE=\"{}\"\nSCRIPT=\"{}\"\n(cd \"$ROOT\"; \"$NODE\" \"$SCRIPT\" \"$@\")\n".format(ctx.path(package_json), ctx.path(c...), ...")) File "C:/users/gbown/appdata/local/temp/_bazel_gbown/afpn2gxi/external/build_bazel_rules_nodejs/internal/node_install.bzl", line 96, in "\nROOT=\"$ ctx.path(ctx.attr._node) Not a file: C:/users/gbown/appdata/local/temp/_bazel_gbown/afpn2gxi/external/nodejs/bin/node.

The correct segment of the path is:
C:\Users\gbown\AppData\Local\Temp_bazel_gbown\aFPn2GXi\external\nodejs
There is no bin directory in the nodejs folder

The BUILD.bazel file may be the first location in the stack with the root cause elsewhere?
C:\Users\gbown\AppData\Local\Temp_bazel_gbown\aFPn2GXi\external\nodejs\BUILD.bazel
package(default_visibility = ["//visibility:public"]) exports_files([ "bin/node", "bin/npm", ]) alias(name = "npm", actual = "bin/npm")

How to rename ABC project [SOLVED]

I guess everything here is obvious for bazel developers.
But I'm not bazel developer and I faced the issue today. So that post might be helpful for developers like me.

  1. A dash is forbidden symbol for bazel project name.
    So you can't name your project 'my-super-app'. It has to be 'my_super_app' or something without dashes.

  2. bazel project name is situated in WORKSPACE

workspace(name = "angular_bazel_example")

Also, some BUILD files can contain the name. Especially /src/BUILD.bazel

ts_devserver(
    name = "devserver",
    entry_module = "angular_bazel_example/src/main",
    scripts = ["//:angular_bundles"],
    serving_path = "/bundle.min.js",
    static_files = [
        ":zone.js",
        "index.html",
    ],
    deps = ["//src"],
)
  1. After renaming you will need to relaunch dev server.

  2. Renaming BUILD files doesn't cause extra changes. But after renaming WORKSPACE, next launch will be loading much longer.

Cannot build a target from http_archive

I'm trying to run the angular_bazel_example repo via an http_archive from another repo.

This is what I added to my WORKSPACE file

http_archive(
    name = "angular_bazel_example",
    urls = ["https://github.com/alexeagle/angular-bazel-example/archive/0a002d2235397f67ee8a3647c67eca18a000ab47.zip"],
    strip_prefix = "angular-bazel-example-0a002d2235397f67ee8a3647c67eca18a000ab47"
)

This is the command I ran:
bazel build @angular_bazel_example//src

This is the error I got:

ERROR: /home/oferb/.cache/bazel/_bazel_oferb/e357d1b79ee86f22599e24bbb734e499/external/angular_bazel_example/src/hello-world/BUILD.bazel:7:1: SassCompiler external/angular_bazel_example/src/hello-world/hello-world-styles.css failed (Exit 1)
Error: file to import not found or unreadable: src/shared/fonts
       Current dir: /home/oferb/.cache/bazel/_bazel_oferb/e357d1b79ee86f22599e24bbb734e499/bazel-sandbox/7071718766955276688/execroot/angular_bazel_example/external/angular_bazel_example/src/hello-world/
        on line 1 of external/angular_bazel_example/src/hello-world/hello-world.component.scss
>> @import "src/shared/fonts";
   --------^
Target @angular_bazel_example//src:src failed to build

Any ideas?

Installing npm library randomcolor causes Process exited with status 1

I've recently been trying to update an older fork of this project to the latest version. However, I've encountered a weird issue with a particular library, randomcolor. In my main project, I have other libraries installed that work fine. This might be an issue with rules_typescript or angular, but since there's no error message I can't figure out what the problem is.

Repro steps and errors below:

# Currently at 2de57acb832f585ae63ea0c250ee85f91c837800
git clone https://github.com/alexeagle/angular-bazel-example.git
cd angular-bazel-example
yarn install
bazel run //src:devserver

# Everything builds, runs, and I can connect in my browser

yarn add randomcolor

bazel run //src:devserver
INFO: Analysed target //src:devserver (2 packages loaded).
INFO: Found 1 target...
ERROR: /home/doug/.cache/bazel/_bazel_doug/ca4712e0ce70722115677a43d9af3e5b/external/angular/packages/bazel/src/ngc-wrapped/BUILD.bazel:29:1: Creating runfiles tree bazel-out/host/bin/external/angular/packages/bazel/src/ngc-wrapped/ngc-wrapped.runfiles [for host] failed: Process exited with status 1: Process exited with status 1
Target //src:devserver failed to build
Use --verbose_failures to see the command lines of failed build steps.
INFO: Elapsed time: 5.174s, Critical Path: 0.10s
INFO: 0 processes.
FAILED: Build did NOT complete successfully
FAILED: Build did NOT complete successfully

# Run it again, get a different message
bazel run //src:devserver
INFO: Analysed target //src:devserver (0 packages loaded).
INFO: Found 1 target...
ERROR: /home/doug/.cache/bazel/_bazel_doug/ca4712e0ce70722115677a43d9af3e5b/external/build_bazel_rules_typescript/internal/BUILD.bazel:31:1: Creating runfiles tree bazel-out/host/bin/external/build_bazel_rules_typescript/internal/tsc.runfiles [for host] failed: Process exited with status 1: Process exited with status 1
Target //src:devserver failed to build
Use --verbose_failures to see the command lines of failed build steps.
INFO: Elapsed time: 0.757s, Critical Path: 0.02s
INFO: 0 processes.
FAILED: Build did NOT complete successfully
FAILED: Build did NOT complete successfully

# More runs alternate between the two messages

In case you need it:

bazel info                                                                                                   2 โ†ต
bazel-bin: /home/doug/.cache/bazel/_bazel_doug/ca4712e0ce70722115677a43d9af3e5b/execroot/angular_bazel_example/bazel-out/k8-fastbuild/bin
bazel-genfiles: /home/doug/.cache/bazel/_bazel_doug/ca4712e0ce70722115677a43d9af3e5b/execroot/angular_bazel_example/bazel-out/k8-fastbuild/genfiles
bazel-testlogs: /home/doug/.cache/bazel/_bazel_doug/ca4712e0ce70722115677a43d9af3e5b/execroot/angular_bazel_example/bazel-out/k8-fastbuild/testlogs
character-encoding: file.encoding = ISO-8859-1, defaultCharset = ISO-8859-1
command_log: /home/doug/.cache/bazel/_bazel_doug/ca4712e0ce70722115677a43d9af3e5b/command.log
committed-heap-size: 2758MB
execution_root: /home/doug/.cache/bazel/_bazel_doug/ca4712e0ce70722115677a43d9af3e5b/execroot/angular_bazel_example
gc-count: 28
gc-time: 1568ms
install_base: /home/doug/.cache/bazel/_bazel_doug/install/ca1b8b7c3e5200be14b7f27896826862
java-home: /home/doug/.cache/bazel/_bazel_doug/install/ca1b8b7c3e5200be14b7f27896826862/_embedded_binaries/embedded_tools/jdk
java-runtime: OpenJDK Runtime Environment (build 9.0.7.1+1) by Azul Systems, Inc.
java-vm: OpenJDK 64-Bit Server VM (build 9.0.7.1+1, mixed mode) by Azul Systems, Inc.
max-heap-size: 7478MB
output_base: /home/doug/.cache/bazel/_bazel_doug/ca4712e0ce70722115677a43d9af3e5b
output_path: /home/doug/.cache/bazel/_bazel_doug/ca4712e0ce70722115677a43d9af3e5b/execroot/angular_bazel_example/bazel-out
package_path: %workspace%
release: release 0.16.1
repository_cache: /home/doug/.cache/bazel/_bazel_doug/cache/repos/v1
server_pid: 11042
used-heap-size: 423MB
workspace: /tmp/randomcolor/angular-bazel-example

yarn --version                                                                                               1 โ†ต
1.9.4

Thanks for your help!

prebuildifier and buildifier commands no longer work

It seems the version of com_github_bazelbuild_buildtools specified in the checksum was re-released with a different checksum. If you update to the correct checksum you can no longer run bazel build @com_github_bazelbuild_buildtools//buildifier successfully. Inspecting the download .zip file it seems like the command should work since there is in fact a build file in buildifier/BUILD. My working theory is that they somehow invalidated their workspace file when they rerelaesed and that's the reason the target cannot be found

Rollup bundle is way too big

$ bazel build src:bundle
$ ls -alH dist/bin/src/bundle.min.js
-r-xr-xr-x 1 alexeagle eng 928105 Jan 19 16:34 dist/bin/src/bundle.min.js

A hello world app should be a lot smaller. First problem is it brings in rxjs from npm (using commonjs)

/cc @robwormald who helped me debug it

Error getting Bazel info exit status 2

I tried setup project by this manual - https://github.com/alexeagle/angular-bazel-example/wiki/Converting-an-Angular-CLI-workspace

โœ— ibazel run src:devserver
Error getting Bazel info exit status 2
Querying for files to watch...
ERROR: error loading package '': Encountered error while reading extension file 'package.bzl': no such package '@build_bazel_rules_typescript//': No WORKSPACE file found in /private/var/tmp/_bazel_stevermeister/c156bfd1677c543b29fb4c3a2fa76dc6/external/build_bazel_rules_typescript
Error running Bazel exit status 7

Individual module for each single component?

Hey Alex,

Why hello-world.component has own module in the example? Can we create a component without own module?

When I'm trying to delete hello-world.module and to connect hello-world.component directly to AppModule, I get the error, that hello-world.component isn't added to NgModule

ERROR: /home/webdevelopland/nodejs/ABC-test/src/hello-world/BUILD.bazel:15:1: Compiling Angular templates (ngc) //src/hello-world:hello-world failed (Exit 1)
: Cannot determine the module for class HelloWorldComponent in /home/locked/.cache/bazel/_bazel_locked/04371b4e354c316eda352185c1a7abef/bazel-sandbox/5624049257273830812/execroot/a
ngular_bazel_example/src/hello-world/hello-world.component.ts! Add HelloWorldComponent to the NgModule to fix it.

build

Buildifier in WORKSPACE does not work with rule_go version

Current version of buildifier pulled into WORKSPACE is broken since updating past rules_go 0.11.0:

ERROR: /private/var/tmp/_bazel_greg/2c2a834fcea131eff2d962ffe20e1c87/external/com_github_bazelbuild_buildtools/buildifier/BUILD.bazel:3:1: @com_github_bazelbuild_buildtools//buildifier:buildifier: no such attribute 'linkstamp' in 'go_binary' rule
ERROR: error loading package '@com_github_bazelbuild_buildtools//buildifier': Package 'buildifier' contains errors

Stop using xvfb just for Chrome

two possible resolutions:

  • make use of a browser that doesn't have a headless mode - we have Firefox in the docker image already
  • remove the xvfb setup (probably from the docker image too)

/cc @gregmagolan maybe an easy chore for you to pick up? You already pointed this out

can't use @angular/cdk

if I do

bazel run @yarn//:yarn add @angular/cdk
ibazel run src:devserver

then the hello world app fails to load:

Uncaught Error: Mismatched anonymous define() module: function (exports,_angular_core,_angular_common) { 'use strict';

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */

/**
 * Injection token used to inject the document into Directionality.
 * This is used so that the value can be faked in tests.
 *
 * We can't use the real document in tests because changing the real `dir` causes geometry-based
 * tests in Safari to fail.
 *
 * We also can't re-provide the DOCUMENT token from platform-brower because the unit tests
 * themselves use things like `querySelector` in test code.
 */
var DIR_DOCUMENT = new _angular_core.InjectionToken('cdk-dir-doc');
/**
 * The directionality (LTR / RTL) context for the application (or a subtree of it).
 * Exposes the current direction and a stream of direction changes.
 */
var Directionality = /** @class */ (function () {
    function Directionality(_document) {
        /**
         * The current 'ltr' or 'rtl' value.
         */
        this.value = 'ltr';
        /**
         * Stream that emits whenever the 'ltr' / 'rtl' state changes.
         */
        this.change = new _angular_core.EventEmitter();
        if (_document) {
            // TODO: handle 'auto' value -
            // We still need to account for dir="auto".
            // It looks like HTMLElemenet.dir is also "auto" when that's set to the attribute,
            // but getComputedStyle return either "ltr" or "rtl". avoiding getComputedStyle for now
            var /** @type {?} */ bodyDir = _document.body ? _document.body.dir : null;
            var /** @type {?} */ htmlDir = _document.documentElement ? _document.documentElement.dir : null;
            this.value = /** @type {?} */ ((bodyDir || htmlDir || 'ltr'));
        }
    }
    Directionality.decorators = [
        { type: _angular_core.Injectable },
    ];
    /** @nocollapse */
    Directionality.ctorParameters = function () { return [
        { type: undefined, decorators: [{ type: _angular_core.Optional }, { type: _angular_core.Inject, args: [DIR_DOCUMENT,] },] },
    ]; };
    return Directionality;
}());

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */

/**
 * Directive to listen for changes of direction of part of the DOM.
 *
 * Provides itself as Directionality such that descendant directives only need to ever inject
 * Directionality to get the closest direction.
 */
var Dir = /** @class */ (function () {
    function Dir() {
        this._dir = 'ltr';
        /**
         * Whether the `value` has been set to its initial value.
         */
        this._isInitialized = false;
        /**
         * Event emitted when the direction changes.
         */
        this.change = new _angular_core.EventEmitter();
    }
    Object.defineProperty(Dir.prototype, "dir", {
        get: /**
         * \@docs-private
         * @return {?}
         */
        function () { return this._dir; },
        set: /**
         * @param {?} v
         * @return {?}
         */
        function (v) {
            var /** @type {?} */ old = this._dir;
            this._dir = v;
            if (old !== this._dir && this._isInitialized) {
                this.change.emit(this._dir);
            }
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Dir.prototype, "value", {
        /** Current layout direction of the element. */
        get: /**
         * Current layout direction of the element.
         * @return {?}
         */
        function () { return this.dir; },
        enumerable: true,
        configurable: true
    });
    /** Initialize once default value has been set. */
    /**
     * Initialize once default value has been set.
     * @return {?}
     */
    Dir.prototype.ngAfterContentInit = /**
     * Initialize once default value has been set.
     * @return {?}
     */
    function () {
        this._isInitialized = true;
    };
    /**
     * @return {?}
     */
    Dir.prototype.ngOnDestroy = /**
     * @return {?}
     */
    function () {
        this.change.complete();
    };
    Dir.decorators = [
        { type: _angular_core.Directive, args: [{
                    selector: '[dir]',
                    providers: [{ provide: Directionality, useExisting: Dir }],
                    host: { '[dir]': 'dir' },
                    exportAs: 'dir',
                },] },
    ];
    /** @nocollapse */
    Dir.ctorParameters = function () { return []; };
    Dir.propDecorators = {
        "change": [{ type: _angular_core.Output, args: ['dirChange',] },],
        "dir": [{ type: _angular_core.Input },],
    };
    return Dir;
}());

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */

var BidiModule = /** @class */ (function () {
    function BidiModule() {
    }
    BidiModule.decorators = [
        { type: _angular_core.NgModule, args: [{
                    exports: [Dir],
                    declarations: [Dir],
                    providers: [
                        { provide: DIR_DOCUMENT, useExisting: _angular_common.DOCUMENT },
                        Directionality,
                    ]
                },] },
    ];
    /** @nocollapse */
    BidiModule.ctorParameters = function () { return []; };
    return BidiModule;
}());

exports.Directionality = Directionality;
exports.DIR_DOCUMENT = DIR_DOCUMENT;
exports.Dir = Dir;
exports.BidiModule = BidiModule;

Object.defineProperty(exports, '__esModule', { value: true });

}
http://requirejs.org/docs/errors.html#mismatch
    at makeError (bundle.min.js:173)
    at intakeDefines (bundle.min.js:1259)
    at bundle.min.js:1457
    at e.invokeTask (zone.min.js:1)
    at r.runTask (zone.min.js:1)
    at t.invokeTask (zone.min.js:1)
    at a.useG.invoke (zone.min.js:1)
    at n (zone.min.js:1)```

Depending on library in node_modules

I'm pretty new to Angular2+ and typescript and very new to bazel, so apologies if this is a very basic question. How do I get bazel to "use" a library in node_modules?

I assumed adding the ag-grid related lines would add it.

filegroup(
    name = "node_modules",
    # NB: rxjs is not in this list, because we build it from sources using the
    # label @rxjs//:rxjs
    srcs = glob(["/".join([
        "node_modules",
        pkg,
        "**",
        ext,
    ]) for pkg in [
        "@angular",
        "@ngrx",
        "@types",
        "ag-grid",
        "ag-grid-angular",
        "ag-grid-enterprise",
        "protractor",
        "tsickle",
        "tsutils",
        "typescript",
    ] for ext in [
        "*.js",
        "*.json",
        "*.d.ts",
    ]]),
)

Here's the actual error:

: Can't bind to 'rowData' since it isn't a known property of 'ag-grid-angular'.
1. If 'ag-grid-angular' is an Angular component and it has 'rowData' input, then verify that it is part of this module.
2. If 'ag-grid-angular' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.