DEV Community

Angular + Bazel: Getting ready!

Ignacio Le Fluk on September 26, 2019

In this post, I'll make an introduction to what is Bazel, how to use it with the Angular CLI and why it's a good idea to adopt it. What i...
Collapse
 
blackholegalaxy profile image
blackholegalaxy • Edited

Thanks for this great introduction!

Some questions for you!

With standard CLI build, we can rely on different environment.ts files. For example: environment.staging.ts. angular.json allowed replacement of default environment.ts file with the environment specific one depending on configuration when running ng build --configuration=staging for example.

How this can be achieve when migrating to Bazel? Adding bazel to project basically deletes everything related to specific configurations and file replacements.

Collapse
 
afifalfiano profile image
Afif Alfiano

I have the same problem, any solution for this issue?

Collapse
 
negue profile image
negue

Wow. Thanks for the Bazel Intro 🎉

Once this is mandatory ... I already see so many hours of my life being wasted to

a) manage it
b) trying to extend while adding libraries/projects
c) finding the bugs that were added during a) / b) ...

Does this switch to bazel also means that angular.json would be obsolete?

I tried bazel on my projects (small-ish) and it felt that angular without bazel built faster than with bazel, but it could be just some weird issues (on a mac)

Collapse
 
wassimchegham profile image
Wassim Chegham

Does this switch to bazel also means that angular.json would be obsolete?

No, the angular.json is still mandatory. You have to keep it!

Actually, when you run ng add @angular/bazel, we update your angular.json to automatically switch from the older builder to the new Bazel builder, so you can keep running the usual ng build command. See:

github.com/bazelbuild/rules_nodejs...

Collapse
 
johannesjo profile image
Johannes Millan

Thank you very much! Excellent article!

Experience taught me to be skeptic when a new build tool is around the corner as it almost always means some extra work you're not spending on the tasks you originally intended. I can't count the hours I sunk into them. Nevertheless I'm looking forward to faster build times :)

Collapse
 
wassimchegham profile image
Wassim Chegham

What we usually tell developers is that if your Angular application is building fine and you are happy with the build (and tests) speed/perfs, you don't have to switch to Bazel. Also, in most cases, you won't need to learn about Bazel since all common tasks would be handled automatically for you. However, knowing Bazel basics might help, but this is not mandatory.

Collapse
 
afifalfiano profile image
Afif Alfiano

So, how to implemnts environtments dev, stag and prod on angular after add bazel. Before that, I'm used fileReplacement configuration on angular.json to change environment. How about bazel?

Collapse
 
dhondiramjawade profile image
DeeEnJay

This is a good article...

I used Bazel with Angular application but facing many problems with the angular library. can you tell us how we gonna use Bazel with angular library
.

Collapse
 
haist profile image
Haist Saraiva
Collapse
 
dhondiramjawade profile image
DeeEnJay

Thanks for replay I have solved my problems.

Collapse
 
haffani95 profile image
AFFANI

Please, would you tell me why this command isn't working,
bazel query --output=graph ... | dot -Tpng > graph.png

I can't get this part: dot -Tpng it's unknown for my mac.

Collapse
 
flakolefluk profile image
Ignacio Le Fluk

You need graphviz installed in order to run the dot command.
Thanks for noticing it, I'll add this information.

Collapse
 
haffani95 profile image
AFFANI • Edited

Yes, that was the problem, i also realized the problem and i just install it.. it works, so it's used maybe for building the graph png image.
Thank you very much.