Builders, custom typescript transformers, custom tslint rules, schematics — how not to be overwhelmed and lay it all out in your head?

I don't know how about you but I got confused with a variety of tools that Angular CLI provides for some not straightforward Angular environment tasks. Builders, schematics, typescript transformers, customtslint rules, AST — what are these all about, why do we need them and when do we have to use them? My brain was bleeding…

At last, I found a time to dig deeper and sort information about these tools (Hooray!)

Let's review them one by one.

(Angular CLI 9.x codebase is used).

Builders

What are builders in Angular?

In Angular builders are used to do some routine tasks: build code, run lint, run unit tests, deploy code to host-provider.

A number of Angular CLI commands run a complex process on your code, such as linting, building, or testing. The commands use …builders, which apply another tools to accomplish the desired task.

Angular provides … builders that are used by the CLI for commands such as ng build, ng test, and ng lint. Default target configurations … can be found (and customized) in the "architect" section of theworkspace configuration file, angular.json.

You can also extend and customize Angular by creating your own builders, which you can run using theng run CLI command.

https://angular.io/guide/cli-builder

Let’s start with understanding what builders are used for and then explore how they are implemented.

If you runng build command — Angular CLI actually runs the builder handler function (build in our case). Let’s go step by step and see what actually goes on behind the scenes.

*Don't forget that yourmonorepo project can have a few applications, and in angular.json you specify builder for each specific project. And to start builder for a concrete project with Angular CLI you should add project name to the command, for example: ng build app1 (you can read more in my monorepo articlehere)

1. Read config in angular.json and find respective builder (projects->projectName->architect->build-> builder)

"builder":"@angular-devkit/build-angular:browser",// originalOR"builder":"@angular-builders/custom-webpack:browser",// custom

Here iscode ofbuild-angular:browser builder.

1. Create a builder instance and run it

exportdefaultcreateBuilder<json.JsonObject&BrowserBuilderSchema>(buildWebpackBrowser);

1. The builder runs its standard tasks:

a)assertCompatibleAngularVersion

b)buildBrowserWebpackConfigFromContext andrunWebpack (webpack starts typescript compiler for your code)

c)copyAssets

d)generateBundleStats

e)generate index.html

f)Apply service worker if needed

and we get bundle files (index.html, css, js files in ./dist folder)

So what are builders used for?

Actually, they can be used for everything about your codebase: build, dev-server, run unit tests, run linter, etc

Now you can assume whatng add command does — among many other things it adds new records to angular.json file (adding a new builder) — we will talk aboutng add a bit later.

Let's runng add@angular/fire in our project and check how angular.json is changed:

As you can see — a new deploy builder was added (so we can dong deploy now for our project to upload bundled files to FireBase hosting).

Angular CLI standard builders

As you can see from picture above — standard Angular CLI builders are located in@angular-devkit package which containsbuild-angular collection.

Here you can find all builders like build, karma, browser, dev-server, etc and their implementations.

Custom builders

Also, you can create your own builder for custom purposes:

1. To add extra Webpack config options(custom-webpack buildersbyJeB Barabanov)
2. Concat bundled JS files(ngx-build-plusbuilder byManfred Steyer)
3. Automate other routine tasks for you(configure and run source-map-explorer — bySantosh Yadav)

More to read

1. Angular CLI builders (official doc)
2. Angular CLI under the hood — builders demystified byJeB Barabanov
3. Custom Angular builders list page bySantosh Yadav

Conclusion

Builders are used to do some routine tasks: build code, run lint, run unit tests, deploy code to host-provider. Also, you can create your own builders to automate some operations and add some new possibilities: add Webpack configs, run scripts, concatenate bundled files, etc.

Schematics

Schematics transform your project: update files, install packages, add new component/modules/directives/etc files.

TheAngular CLI uses schematics to apply transforms to a web-app project (modify or create project files).

Schematics are run by default by the commandsng generate , andng add.

If you create a new version of your library that introduces potential breaking changes, you can provide anupdate schematic to enable theng update command to automatically resolve any such changes in the project being updated (to do automatically changes in project code so code uses new API).

https://angular.io/guide/schematics

and

Schematics is a workflow tool for the modern web; it can apply transforms to your project, such as create a new component, or updating your code to fix breaking changes in a dependency. Or maybe you want to add a new configuration option or framework to an existing project

Schematics — An Introduction

Ok, too vague as for me. Let's make it more specific.

Do you remember how we added the possibility to deploy to FireBase hosting in the previous section withng add@angular/fire command? We use schematics.

What did this schematics do for us?

Continue reading....

I am preparing my future video-course with advanced techniques of mastering Angular/RxJS. Want to get a notification when it is done? Leave your email here (and get free video-course):http://eepurl.com/gHF0av

Like this article? Follow me onTwitter!