Bazel is an open-source build tool similar to Make, Maven and Gradle. Bazel supports projects in multiple languages and builds outputs for multiple platforms. Angular itself is even built with bazel.
So Why Use Bazel?
Bazel has the following advantages:
- High-level build language. Bazel uses an abstract, human-readable language to describe the build properties of your project. Bazel operates on the concepts of libraries, binaries, scripts and data-sets, shielding you from the complextity of compilers and linkers.
- Bazel is fast and reliable. Bazel caches all previously done work and tracks changes to both file content and build commands
- Bazel is multi-platform. Bazel runs on Linux, macOS and Windows.
- Bazel scales. Bazel can handle builds with 100k+ source files. It is even possible to have remote builds.
- Bazel is extensible. Many languages are supported and you can extend Bazel to support any other language and framework.
Let’s Start a New Project with Bazel
The @angular/bazel package provides a builder that allows the Angular CLI to use Bazel as the build tool. Install it first as such:
|
1 |
npm install -g @angular/bazel |
We can then create the new application with:
|
1 |
ng new --collection=@angular/bazel |
Now when you use Angular CLI build commands like ng build and ng serve, Bazel is used behind the scenes. You may now notice that there aren’t any Bazel files added. That’s because the Angular CLI keeps them in memory.
Customizing the Build
What you have now is a basic Bazel configuration. As soon as you want to add more dependencies to your project, you will need to customize the build. Since there are currently no Bazel files in our project, we will need to have them created. We can do that as such:
|
1 |
ng build --leaveBazelFilesOnDisk |
This will trigger a build and create the appropriate Bazel Files (WORKSPACE, BUILD.bazel, .bazelrc and .bazelignore).
We can now customize the build.
Adding new Dependencies
Inside the src/BUILD.bazel, you will find the ng_module definition
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
ng_module( name = "src", srcs = glob( include = ["**/*.ts"], exclude = [ "**/*.spec.ts", "main.ts", "test.ts", "initialize_testbed.ts", ], ), assets = glob([ "**/*.css", "**/*.html", ]) + ([":styles"] if len(glob(["**/*.scss"])) else []), deps = [ "@npm//@angular/core", "@npm//@angular/platform-browser", "@npm//@angular/router", "@npm//@types", "@npm//rxjs", ], ) |
Notice that the deps attribute contains all of your dependencies. This is where we will add our new dependency. In our case, we want to add a component that uses the forms support from Angular. We add it here
|
1 2 3 4 5 6 7 8 |
deps = [ "@npm//@angular/core", "@npm//@angular/platform-browser", "@npm//@angular/router", "@npm//@angular/forms", "@npm//@types", "@npm//rxjs", ], |
To learn more about Angular and Bazel, please visit bazel.angular.io. You should also check out the advanced customization example at rules-nodejs
Social Media