Angular CLI flows. Big picture.
Tags: angular, softwaredevelopment, programming, angularcli
Published: 2020-05-15 12:14:22

---
title: Angular CLI flows. Big picture.
published: true
date: 2020-05-01 06:01:11 UTC
tags: angular,software-development,programming,angular-cli
canonical_url: https://medium.com/angular-in-depth/angular-cli-flows-big-picture-9ed1a0d1930
cover_image: https://cdn-images-1.medium.com/max/1024/1*FullgTvyBUnrCp8KSqvrRw.png
---

_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, custom _tslint_ 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 the [workspace configuration file](https://angular.io/guide/workspace-config), angular.json.

> You can also extend and customize Angular by creating your own builders, which you can run using the [ng run CLI command](https://angular.io/cli/run).

> [_https://angular.io/guide/cli-builder_](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 run **_ng 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 your [monorepo project](https://indepth.dev/making-an-angular-project-mono-repo-with-ngrx-state-management-and-lazy-loading/) 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 article [here](https://indepth.dev/making-an-angular-project-mono-repo-with-ngrx-state-management-and-lazy-loading/))

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

```ts
"builder": "@angular-devkit/build-angular:browser", // original

OR

"builder": "@angular-builders/custom-webpack:browser", // custom
```

Here is [code of _build-angular:browser_](https://github.com/angular/angular-cli/blob/9de389fb770568919d6f2465cc155e0835926eaf/packages/angular_devkit/build_angular/src/browser/index.ts) builder.

2. Create a builder instance and run it

```ts
export default createBuilder<json.JsonObject & BrowserBuilderSchema>(buildWebpackBrowser);
```

3. The builder runs its standard tasks:

a) [assertCompatibleAngularVersion](https://github.com/angular/angular-cli/blob/9de389fb770568919d6f2465cc155e0835926eaf/packages/angular_devkit/build_angular/src/browser/index.ts#L239)

b) [buildBrowserWebpackConfigFromContext](https://github.com/angular/angular-cli/blob/9de389fb770568919d6f2465cc155e0835926eaf/packages/angular_devkit/build_angular/src/browser/index.ts#L209) and [runWebpack](https://github.com/angular/angular-cli/blob/9de389fb770568919d6f2465cc155e0835926eaf/packages/angular_devkit/build_angular/src/browser/index.ts#L260) (webpack starts typescript compiler for your code)

c) [copyAssets](https://github.com/angular/angular-cli/blob/9de389fb770568919d6f2465cc155e0835926eaf/packages/angular_devkit/build_angular/src/browser/index.ts#L579)

d) [generateBundleStats](https://github.com/angular/angular-cli/blob/9de389fb770568919d6f2465cc155e0835926eaf/packages/angular_devkit/build_angular/src/browser/index.ts#L603)

e) [generate index.html](https://github.com/angular/angular-cli/blob/9de389fb770568919d6f2465cc155e0835926eaf/packages/angular_devkit/build_angular/src/browser/index.ts#L712)

f) [Apply service worker](https://github.com/angular/angular-cli/blob/9de389fb770568919d6f2465cc155e0835926eaf/packages/angular_devkit/build_angular/src/browser/index.ts#L741) 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

![](https://cdn-images-1.medium.com/max/834/1*BGbM18dNoX31ol0pg525Hg.png)

Now you can assume what **_ng add_** command does — among many other things it adds new records to angular.json file (adding a new builder) — we will talk about _ng add_ a bit later.

Let's run **_ng add_** [**_@angular/fire_**](http://twitter.com/angular/fire) in our project and check how angular.json is changed:

![](https://cdn-images-1.medium.com/max/891/1*PEEC85oUafShhvBJ50T6bQ.png)<figcaption>deploy builder was added</figcaption>

As you can see — a new deploy builder was added (so we can do _ng 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 contains _build-angular_ collection.

![](https://cdn-images-1.medium.com/max/1024/1*kI0erIThEY1l6MJOjep2Xw.png)

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 builders_](https://github.com/just-jeb/angular-builders/tree/master/packages/custom-webpack) _by_ [**_JeB Barabanov_**](https://medium.com/u/8169dbace738) _)_
2. **_Concat bundled JS files_** _(_[_ngx-build-plus_](https://github.com/manfredsteyer/ngx-build-plus) _builder by_ [**_Manfred Steyer_**](https://medium.com/u/acb3f1945710)_)_
3. **_Automate other routine tasks for you_** _(_[_configure and run_ source-map-explorer](https://twitter.com/SantoshYadavDev/status/1246861985901211654) — by [Santosh Yadav](https://medium.com/u/c0dd31a08f42))

#### More to read

1. [Angular CLI builders (official doc)](http://Angular%20CLI%20builders)
2. [Angular CLI under the hood — builders demystified](https://medium.com/angular-in-depth/angular-cli-under-the-hood-builders-demystified-v2-e73ee0f2d811) by [JeB Barabanov](https://medium.com/u/8169dbace738)
3. [Custom Angular builders list page](https://angular-builders.dev/home) by [Santosh Yadav](https://medium.com/u/c0dd31a08f42)

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

> The [Angular CLI](https://angular.io/guide/glossary#cli) uses schematics to apply transforms to a web-app project (modify or create project files).

> Schematics are run by default by the commands **ng generate** , and **ng add**.

> If you create a new version of your library that introduces potential breaking changes, you can provide an _update schematic_ to enable the **ng 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](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](https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2)

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 with **_ng add_** [**_@angular/fire_**](http://twitter.com/angular/fire) command? We use schematics.

What did this schematics do for us?

[Continue reading....](https://medium.com/angular-in-depth/angular-cli-flows-big-picture-9ed1a0d1930?source=---------2------------------)

* * *
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 on [Twitter](https://twitter.com/El_Extremal)!