Tracking issue: Angular BuildTools Convergence (ABC)

[alexeagle]

We are open-sourcing the toolchain we use internally at Google to build Angular apps at scale.

One-pager: http://g.co/ng/abc

This issue will be used to give updates on progress.

FAQ: how does this relate to Angular CLI? We will evaluate this toolchain with some early adopters first, if it goes well, we will evaluate whether to use it inside the CLI. So long as you haven't ejected from the CLI, such a change should be transparent to users.

[zh99998]

sounds like a big news.
will angular-cli moves to ABC and drop recommend of current webpack-based build system ?

[abdel-ships-it]

Looks promising !

Is this going to kill the angular CLI? And will it eventually be a drop in replacement for codebases built with the angular CLI?

[mlc-mlapis]

@realappie Angular CLI is a top layer so it should not be affected a lot but some changes probably could be.

[alexeagle]

Updated the description above. It's possible this could be the build system in the CLI one day, but too early to be sure.

[alexeagle]

Update: we are starting to accept enterprises in an Early Access Program, to try this out with support from our team.
If you are willing to tolerate risk, missing documentation, and commit to giving feedback, then we'd like to have you use this soon. Fill out https://goo.gl/forms/Tv8lMdH0N3D4yo8Q2 and I'll get in touch once we are ready to support your use cases.

[crutchcorn]

Is there any way for individuals to sign up for this program rather than corporations?

[alexeagle]

You can fill out the form, but we're interested in applications with thousands of source files that suffer from slow builds under Angular CLI, so we might not have capacity to take your use case.

…

On Tue, Nov 21, 2017 at 12:28 PM Corbin Crutchley ***@***.***> wrote: Is there any way for individuals to sign up for this program rather than corporations? — You are receiving this because you were assigned. Reply to this email directly, view it on GitHub <#19058 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAC5I9E7KQxWkaii81xdmCr2e8MftomSks5s4zJagaJpZM4PNaCr> .

[GoNode5]

@alexeagle could you define in time/seconds what you think is a slow build. The fact that the Angular platform degraded JIT, to a old fashioned build/compile/link time experience, even with small projects, I don't know what to expect. The reason I chose Javascript is because of JIT, wich I don't enjoy anymore in relation to Angular. AngularJS jit was F5 refresh build. Now ng build --prod is something to execute is low as possible, even with 'small ish?' projects.

[schmitch]

I doubt that AnulgarJS jit was F5 refresh + build.
Either your browser loaded for some seconds or it took at least seconds to actually concat all the files.
AOT is the same, than any concat, just that it is more clever which will reduce the browser loading time.

[mlc-mlapis]

@GoNode5 ... actually you can have dev time which is < 1 second = you just don't wait at all.

Another story is the whole building process to produce a completely new build for production or testing server (which is just internal version = the last step before production).

[alexeagle]

Our goal is <2s dev roundtrip (50%ile) for a large project, O(thousands) of source files.

[GoNode5]

@schmitch You can doubt what you want, just look at a hello world ng serve size Angular project...

Compared that to my AngularJS project F5 (cache disabled) . I could add 600KB Angular Code but that wouldn't change much. The show load in image is a full project with about 30 screens, multi language. The thirdparty libs take's most of the load.

With runtime / ng build -prod, I'am very happy with the 'end' result. Fast, small en stable. But my developers experience is ruined. I had to buy a faster computer, create strategy's. In a larger project it's not only the ng serve rebuild time, but the runtime compile feels also slow.

For me the whole JIT experience is gone while developing.

[schmitch]

61 requests means that your project was really really small.
if you used systemjs and had 61 requests in a typical angularjs project it means you basically created hello world.
the other route was gulp/grunt and concat everything even that took a while for a decent sized project (more than 200 files js+html)
btw. our angularjs app only had 6xx files with 30k loc. it's now a hybrid app. loading barley changed.

still around 5s or more while on a clean site over 30 seconds (same happend on angularjs) if we tried out systemjs it was painful, because we didn't had any lazy loading at all so it loaded 500 files that was damn painful.

[alexeagle]

Update: we now have a basic devserver ready to try out. I updated the README: https://github.com/alexeagle/angular-bazel-example

The purpose of this devserver is:

• make a very easy getting-started experience, where you just add a ts_devserver rule that points to your app sources
• a reference for benchmarks, because this devserver just concatenates the JS sources it scales very well

Much of the smarts are actually in ibazel, so it will be pretty easy to swap it out for some other devserver, like webpack, express, or even your Java or PHP backend, etc. We will write some documentation about how to make those other devservers work with ibazel.

Thanks to @gregmagolan for most of the work here.

see the earlier comment if you would like official support for using this.

[mattem]

@alexeagle That's awesome! My team has already signed up the EAP, and I will definitely explore the example you published further.
A few questions from a quick glance through it.

• Is there support for using templateUrl instead of having the template inline for the component?
• Using a reference to the sass file in styleUrls instead of the generated CSS file. Some IDEs (Webstorm for example) have editor support for clicking through to the file there, which is lost when using the css extension.
• Rewriting the main.ts file to automatically include the import and bootstrap of the AppModuleFactory (like the angular CLI), same as the point above really, the editor picks this up as importing a file that does not exist.

[alexeagle]

Yes, templateUrl works just as well as template. This just runs ngc so all the usual caveats apply from Angular development in some other build toolchain like the CLI.

The styleUrls is a good point. It's subtle, because we don't want to magically re-write the file, and by the time Angular's compiler sees the component, there is no longer a .scss file to read. I think the best solution is to omit the extension on style files, just as we do for referencing .ts vs .js files. It means tools would need to know to look for both, and that means we'd need editor support to evolve. It's a stretch.
The simpler answer is to teach Angular to look for foo.css if it can't find foo.scss but I think this isn't a general solution because the scss_binary rule can produce an output file with a different name from the input.

Importing generated code looks strange, but this is idiomatic in Bazel, and it's what we do internally at Google. However, this particular problem will go away in Angular 6 - the plan is that the factory will be emitted as a static property of the Component class, and so you'll be able to just import the component and we'll know how to resolve the factory from that at runtime.

[alexeagle]

It's a big week for ABC launches - we now have browser unit testing using Karma included in the example app. See the spec file

https://github.com/alexeagle/angular-bazel-example/blob/master/src/hello-world/hello-world.component.spec.ts

and the test target

https://github.com/alexeagle/angular-bazel-example/blob/c0fec902ce74e2ee00b194c7fad9fb5e056a4050/src/hello-world/BUILD.bazel#L37-L45

I also did a major pass over the documentation, adding the devserver, karma testing, formatting, CI, and more. https://github.com/alexeagle/angular-bazel-example/wiki

[alexeagle]

Another launch announcement: we have a rollup_bundle rule you can use to create a production bundle. See https://github.com/bazelbuild/rules_nodejs#bundlingoptimizing for the doc and https://github.com/alexeagle/angular-bazel-example for an example usage.

At this point we are just missing code-splitting/lazy-loading and Windows support, to have feature parity with Angular CLI (for features I'm aware of :) )

[artaommahe]

At this point we are just missing code-splitting/lazy-loading and Windows support, to have feature parity with Angular CLI.

what about webpack features like inlining images in ts-files via require + loaders?

[alexeagle]

@artaommahe good point, there's probably a long tail of features I'm not aware of. We have solutions for all these things at Google so it's just a matter of finding the idiomatic way to do it, and measuring the demand for which features to add when.

[schmitch]

Does this use Closure for the end bundle or still use js tooling?

[mgechev]

You need to specify the project name with the --name command line option.

[mgechev]

Updates from April & May:

💥 Angular CLI Bazel opt-in preview

On ng-conf Alex Eagle announced the official opt-in preview of Bazel in Angular CLI! You can give it a try today with the @angular/bazel schematics. For more information, check our new guide on angular.io.

💬 Conference presentations

• You can find the ng-conf talk “The Bazel Opt-in Preview is Here!” by Alex Eagle
• Alex and Danna Kelmer from the Bazel team spoke on Cloud Next about “Building Web Apps like Google”
• Brad Green talked about Bazel during the ng-conf keynote. He also mentioned two of the companies who’re currently building their entire stack with Bazel!
• Alex presented this talk also on Google I/O 2019!

✋ Support program

We resumed the enterprise support program! If your company is building a large Angular application and you think that Bazel might be a good fit for you, let us know! We’d love to look at your use case and help you get started. If you want to join, fill this form or respond to this email directly.

💫 New landing page

We created a landing page for Bazel with Angular and published it at https://bazel.angular.io. There you can find links to documentation, resources, examples, and more! The latest version of the Angular Bazel example is available at bazel.angular.io/example.

👌 Smaller binary

The Bazel team has been working hard to reduce the binary size to improve install times on slow networks. The latest Bazel release is 45MB, down from 160MB a year ago.

[bunnyvishal6]

Why this repo not using Google Cloud Build instead of Circle CI?

[manekinekko]

Hey @bunnyvishal6 any particular reason why you are asking this?

[bunnyvishal6]

@manekinekko no particular reason. But as Google Cloud Build getting better, and Angular is also lead by Google, I wonder why it isn't using its own product?

[sgammon]

@mgechev / @alexeagle - we are very excited on the progress here, we are an existing Bazel-based company (in part) and we want to pick up angular. is there any substantive update for June or July? we filled out the form as well - RBE support sounds fantastic and we’re already in the alpha there too.

[mgechev]

Here are few updates from June!

📚 Articles

We posted an article announcing the Bazel’s opt-in preview. In the post, you can find instructions on how to bootstrap your first Bazel project with the Angular CLI and what are our plans for the next quarter!

Pssst, here’s how to give Bazel a try today:

ng new app --collection=@angular/bazel

🧰 Tools

Create a new Bazel workspace with @bazel/create. Yarn and npm have a shortcut that lets you install a package and invoke a binary using a single command! You can bootstrap a new JavaScript Bazel workspace using:

npm init @bazel

Or using yarn:

yarn create @bazel

Read more about npm init and yarn create.

📈 Statistics

Bazel’s adoption has been growing! Here are some numbers from npm:

Package name	Weekly downloads
@bazel/typescript	13,723
@angular/bazel	5,964
@bazel/bazel	5,912

And rules_nodejs have over 158,911 downloads since we started the project!

See you next month!

[bleuscyther]

@mgechev , thx for the update. What would be a good guide to migrate old projects to bazel? If i start a new one it works perfectly, but i was not able to finish the migration for one of my old ones 2 weeks ago. I would like to give it another go.

[mgechev]

There's no such guide yet. You can find a sample application in the Angular Bazel Example.

I also migrated the Real World Angular Example by the StackBlitz folks.

[glebmachine]

Waiting bazel support for stylus!

[marcus-sa]

Support for LESS would be great as well!

[mgechev]

For August we have a few updates, but most actionable recently!

• New rules for Less - feat(less): new less package bazelbuild/rules_nodejs#1017
• New rules for Stylus feat(stylus): add initial stylus rule bazelbuild/rules_nodejs#908
• Better npm module support - Add browser module main priority to generated umd bundles bazelbuild/rules_nodejs#997
• Automatic rollup_bundle code splitting I825 no additional entry points bazelbuild/rules_nodejs#839
• New docs site for rules_nodejs

[mgechev]

We have two major Bazel updates for you today!

🎉 Bazel 1.0 is out!

Few key features of the 1.0 release are:

• Semantic Versioning
• Long-Term Support
• Well-rounded features for Angular, Android, Java, and C++

You can read more in the official announcement on the Google Open Source blog. Additionally, you can find a gentle introduction to Bazel and its experimental integration with the CLI in this community post by Ignacio Le Fluk "Angular + Bazel: Getting ready!".

📣 Enhanced JavaScript support

Talking about well-rounded features for Angular, Bazel can now run pretty much any module with an executable from npm! You can directly load the binary in your BUILD file and execute an automatically generated rule. For example, you can start an http server with the following short snippet:

load("@npm//http-server:index.bzl", "http_server")

http_server(
    name = "server",
    data = [
        "index.html",
        "app.es5.js",
    ],
    templated_args = ["."],
)

Read more about the first-class JavaScript support in this post by @alexeagle.

[glebmachine]

@alexeagle you added bazel/stylus rule, but, it still unsupported by @angular/bazel builders
Could you please add stylus[, less] support to angular/cli

Looking forward to migrate to bazel toolchain : )

[afifalfiano]

Hallo, i'm beginner using bazel on windows, do you know what this problem? and any solution?

[petebacondarwin]

@afifalfiano - I propose that your core Angular libraries have not been compiled by ngcc to be consumable by the Angular ivy compiler. This is managed for you with the Angular CLI. I don't know much about how it is done if using Bazel directly. I suggest that you try running ngcc in your project root to compile all the node_modules packages.

[afifalfiano]

@afifalfiano - I propose that your core Angular libraries have not been compiled by ngcc to be consumable by the Angular ivy compiler. This is managed for you with the Angular CLI. I don't know much about how it is done if using Bazel directly. I suggest that you try running ngcc in your project root to compile all the node_modules packages.

oke, absolutely i got soluction, when first i compile using ngcc and then i build this project using bazel run target, everything running well, but i have another problem, when i running ng serve, my project can't running cause ibazel cant find the file existing bazelisk

[alexeagle]

Update here: I published a blog post about Bazel support for Angular along with other frameworks, using an approach that relies less on Angular supporting any Bazel-specific bits.
https://dev.to/bazel/angular-bazel-leaving-angular-labs-51ja

[afifalfiano]

@alexeagle Hello Alex, how do I configure an angular environment with bazel? Before using bazel, I use file Replacement in angular.json? any idea?

[hiepxanh]

I just successful run the Bazel on my Windows computer, it really amazing, just wonder any kind of "getting start with Bazel and Angular". Because I already read the BUILD.bazel but not really family with it

[literalpie]

@hiepxanh I believe the best resource available is the example code here. If you're looking for a tutorial or guide to get started, I don't think there's a particular one that stands out as the best.

I would recommend the sample code because it is maintained along with the nodejs rules, so it should always be up to date. It also has some comments that do a little explaining of why certain things are included and what they do.

[alexeagle]

🥇 Here's the final update 🥇

I started this project three years ago with two ambitious requirements:

1. Provide a scalable toolchain for big companies like Google with massive apps beyond the limits of existing OSS tooling
2. Angular team maintains only one toolchain

I think we have reached the first goal. Angular + Bazel has left Angular Labs and has some production usage. We have been maturing this and just reached 2.0 of rules_nodejs, where this support is maintained, demonstrated, and documented.

However the second requirement is much harder. Angular must maintain the CLI and keep all users updated to the latest. Switching this to Bazel required making it adoptable by the most novice users on small projects. This is the "Convergence" in the project title. It's very hard and was only ever staffed by one engineer (@gregmagolan who's awesome), plus me in part-time.

We didn't achieve Convergence, so Angular team will continue to maintain only the CLI (and the underlying build system called "Architect" aka CLI Builders). You can choose to layer Bazel on top of that underlying build system, continuing to use Architect for compatibility as documented here; that means you can still use Angular-team-supported tooling under Bazel (though with limited benefits). Big thanks to @alan-agius4 for volunteering to support this option.

What should you do?

If your project fits in Angular CLI, you should use it. Convergence isn't happening. Novice developers will never get the easy turnkey documentation and tools to switch. Bazel will never be the default, so we can close this issue.

Bazel has an on-ramp that requires understanding your build process in detail, and learning some new things like Bazel's configuration language. It's only suitable for projects where someone is willing to take the role of a build system engineer. I believe that extra-large-sized projects already have someone staffed to deal with deficiencies in the OSS toolchains, so in practice if you really need Bazel, you're probably a good fit to adopt it.

You can continue to follow our development in rules_nodejs, or join the #angular channel in http://slack.bazel.build

Thanks Angular community you are all awesome. Much ❤️

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}