Tracking issue: Angular BuildTools Convergence (ABC)

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

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.

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

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?

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

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

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.

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

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> .

@alexeagle

@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.

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.

@GoNode5

@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).

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

@schmitch

@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.

Support for LESS would be great as well!

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

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

@alexeagle

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.

@alexeagle

@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 : )

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

@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.

@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

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

@alexeagle

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

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

@hiepxanh

@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.

@gregmagolan

🥇 Here's the final update 🥇

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

Provide a scalable toolchain for big companies like Google with massive apps beyond the limits of existing OSS tooling
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 ❤️

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.}

Navigation Menu

Repository navigation

Tracking issue: Angular BuildTools Convergence (ABC) #19058

40 remaining items

What should you do?

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Tracking issue: Angular BuildTools Convergence (ABC) #19058

Description

Activity

zh99998 commented on Sep 6, 2017

abdel-ships-it commented on Sep 6, 2017

mlc-mlapis commented on Sep 6, 2017

alexeagle commented on Sep 6, 2017

alexeagle commented on Nov 21, 2017

crutchcorn commented on Nov 21, 2017

alexeagle commented on Nov 22, 2017

GoNode5 commented on Nov 22, 2017

schmitch commented on Nov 22, 2017

mlc-mlapis commented on Nov 22, 2017

alexeagle commented on Nov 23, 2017

GoNode5 commented on Nov 23, 2017

40 remaining items

marcus-sa commented on Aug 14, 2019

mgechev commented on Aug 20, 2019

mgechev commented on Oct 24, 2019

glebmachine commented on Jan 13, 2020

afifalfiano commented on Apr 6, 2020

petebacondarwin commented on Apr 6, 2020

afifalfiano commented on Apr 7, 2020

alexeagle commented on Jun 15, 2020

afifalfiano commented on Jun 15, 2020

hiepxanh commented on Jul 26, 2020

literalpie commented on Jul 26, 2020

alexeagle commented on Jul 26, 2020

What should you do?

angular-automatic-lock-bot commented on Aug 26, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions