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
@angular/bazel package provides a builder that allows the Angular CLI to use Bazel as the build tool. Install it first as such:
npm install -g @angular/bazel
We can then create the new application with:
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:
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
src/BUILD.bazel, you will find the
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
deps = [ "@npm//@angular/core", "@npm//@angular/platform-browser", "@npm//@angular/router", "@npm//@angular/forms", "@npm//@types", "@npm//rxjs", ],