Building a CLI application using Bazel is one of the new capabilities offered by Angular 12. Bazel is a cross-platform application development tool that may be used to build apps in any language. Because of Google's extensive use of this tool, it has grown in popularity.
Bazel's popularity has risen in recent days for a variety of reasons, including:
This tool may be used to create both frontends and backends.
You may use this tool to create and test Angular apps.
Remote builds are supported by this tool.
How Bazel Works
With Bazel, you'll be able to specify activities with explicit outputs and inputs.
To create application components, Bazel utilizes commands. It enables you to create and execute commands.
Bazel builds a task graph in which only the most important ones are executed during the execution of applications. Bazel decides which critical components to execute depending on the user's inputs and the changes made since the last compilation.
One of the most common complaints among Bazel users is that the first build takes a lengthy time. It's also incompatible with all browsers, and downloading the required components to execute it might take along. Mozilla Firefox is an excellent example.
How to create a new Project with Bazel
Step 1: Install Bazel.
Bazel is a lot easy to set up than you would imagine. Simply type "npm I –g @ngular/bazel" into your terminal.
Step 2: Create a brand-new application
To create a Bazel-configured application, execute the command "ng new bazel-project —defaults —collection=@angular/bazel" from the CLI.
The application is identical to a standard Angular CLI project, except it has many additional files:
Bazel application has angular.json files
There is a protractor.on-prepare.js script
A tsconfig.json file
Rxjs_shims.js
Main.prod.ts and main.dev.ts
angular-metadata.tsconfig.json
The most unexpected aspect of using Angular Bazel to create an application is that you will not see the files incrementing because it saves them in memory.
Bazel adds the following dependencies to your application:
@bazel/typescript
@bazel/karma
@bazel/ibazel
@bazel/bazel
@angular/bazel
Step 3 – Start your program. Various angular commands, such as ng serve and ng build, can be used to create other application components.
How to Incorporate Bazel into your Project
Bazel can not only be used to create new applications but it can also be used to enhance current ones. This implies that a traditional Angular application may be converted to a Bazel application. The angular team has created a diagram that enables migrating from conventional angular to Bazel apps simple.
Run the command ng add @angular/bazel in the CLI to add Bazel to your current application. This command will create new Bazel dependencies and configuration files when launched.
How to Customize Bazel Build
The updated program may occasionally fail to run, but it eventually does after tweaking the Bazel build. Let's look at how you can tweak the Bazel build to make your app work.
We use the command "ng build –leaveBazelFilesOnDisk" to add the Bazel files to your application. When you run this command, it will invoke build, which will result in the appearance of Bazel files.
After you've added all of the Bazel files together, you'll need to configure them in order for them to work. Let's look at how you may include Bazel settings into your apps.
Let's start by looking at a common application's ngModule.
The updated program may occasionally fail to run, but it eventually does after tweaking the Bazel build. Let's look at how you can tweak the Bazel build to make your app work.
We use the command "ng build –leaveBazelFilesOnDisk" to add the Bazel files to your application. When you run this command, it will invoke build, which will result in the appearance of Bazel files.
After you've added all of the Bazel files together, you'll need to configure them in order for them to work. Let's look at how you may include Bazel settings into your apps.
How to add Bazel Configurations
First, let's have a look at the ngModule of a typical Application
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",
],)
|
There are TS files, but not for the test-related files or the assets, including HTML and CSS files.
Run the following commands to add the dips property to external modules
deps = [
"@npm//@angular/core",
"@npm//@angular/platform-browser",
"@npm//@angular/router",
"@npm//@angular/forms",
"@npm//@types",
"@npm//rxjs",
"@npm//@ng-bootstrap/ng-bootstrap",
],
|
To allow your application to run the external components, then add the angular-metadata.tsconfig json
After these modifications of adding configurations, you will need to add the require.config.js in your application. In your require.config.js, add the following code
require.config({
paths: {
'moment': 'npm/node_modules/moment/min/moment.min'
}
});
|
Then in the momenr.min.js, add the following code:
ts_devserver(
name = "devserver",
port = 4200,
entry_module = "project/src/main.dev",
serving_path = "/bundle.min.js",
scripts = [
"@npm//node_modules/tslib:tslib.js",
":rxjs_umd_modules",
],
static_files = [
"@npm//node_modules/zone.js:dist/zone.min.js",
],
data = [
"favicon.ico",
"@npm//node_modules/moment:min/moment.min.js",
],
index_html = "index.html",
deps = [
":require.config.js",
":src",
],)
|
Now execute the ng serve command, and your app should be ready to use.
Conclusion
Customizing your Bazel application, as you can see, takes time and effort. Despite taking a long time to configure, Bazel rebuilds substantially and has an examined graph in large projects due to its complete capability. You have numerous libraries and modules that can assist you in compiling your project