This weekend I decided to experiment with using Bazel as the build tool for a simple Angular application. This post is a quick write-up of my learnings so far.
Angular with mainstream Bazel support is still in its early stages, but Alex Eagle and the rest of the Angular team have made great progress on this.
A great starting point for ramping up on Angular with Bazel is Alex’s Building Angular apps at scale article.
For a working Bazel setup you can also checkout his Github repo here.
The main advantage to using Bazel is better scalability of the build process. Specifically it optimizes compilation during development though incremental compilation. Only the parts of the application that actually changed are re-compiled on change.
Bazel supports incremental builds through defined compilation units. The way you define a compilation unit is by adding a BUILD.bazel file per feature you want to compile individually.
Bazel then discovers these files during the build, and uses them to create a dependency graph for incremental compilation.
Experiment
My own experiment is a fork of the Bazel example repo, with some minor adjustments.
Basically I wanted to try adding a few of my own components to test them out with the Bazel setup.
My fork can be found here.
In addition to adding a few components, I integrated the project with another build tool called iBazel.
iBazel is essentially a file watcher for Bazel, which will trigger a re-build of the project after every save.
I discovered that iBazel doesn't seem to be available on npm at the moment. As a workaround I built the project from source and added the generated binary to my project locally.
Compilation seems to work well with this setup, but the project still lacks an integrated dev server with automatic page refresh.
You can launch the site using lite-server, but it doesn’t currently re-bundle and reload in tandem with the iBazel watch process.
UPDATE: I have now added a dev server to this project. Read more here.