Angular Tooling Worth Knowing
Angular developers tend to concentrate on the framework itself. That makes sense, since Angular is built around a consistent approach to crafting solid applications. Still, the framework ships with a surprisingly rich set of tools, and all of it is free and straightforward to adopt.
Here is a rundown of the Angular tools every developer should have on their radar:
TypeScript
The Angular team picked TypeScript early on as the core language for the platform, and that choice was a big part of why I personally got interested in Angular. The language keeps evolving quickly; version 3.7 is already available and the stable release is close.
Stay current by checking the official documentation.
The Angular Compiler
Most developers think of ng build and move on, but the Angular Compiler does far more behind the scenes. According to the Angular docs, the compiler operates in three distinct stages:
- Code Analysis
- Code Generation
- Template Type Checking
A few resources to dig deeper into the compiler:
Webpack
Webpack is arguably the most important piece of the Angular toolchain. It was introduced after Angular 2 in order to remove the need for manual configuration with SystemJS. If you think you have never touched Webpack in an Angular project, you have actually been using it since Angular 4 and you still are.
Have you ever questioned what actually happens when you run ng serve or ng build?
"builder": "@angular-devkit/build-angular:browser"
"builder": "@angular-devkit/build-angular:dev-server"
Do those lines feel familiar?
They come from your angular.json file, inside the build and serve sections.
So where does Webpack fit in?
If you look at the dev-server code above, lines 10–14 reference build-webpack, an implementation living inside @angular/devkit.
import { DevServerBuildOutput, WebpackLoggingCallback,
runWebpackDevServer,} from '@angular-devkit/build-webpack'
You can find the full Webpack implementation within @angular/devkit in this folder:
If you are used to plain JavaScript with Webpack, you might be looking for the usual configuration file. For an Angular app, head over to the location below.
node_modules\@angular\cli\models\webpack-config.js
Maybe you would rather define your own Webpack config, or you want to blend yours with the default one for extra flexibility?
Angular handles that as well. Builders are designed to be extended, and a number of custom builders already exist in the community.
Angular Schematics
If I had to sum up Angular Schematics in one word, it would be:
Schematics are what power the creation of components, modules, and services through the CLI. You can also build your own schematics or change the standard defaults. A detailed guide on creating your own was written by Natalia Venditto:
And if overriding defaults without rolling your own sounds appealing, I covered that in a separate post:
Angular Builders
This is what Builders mean to me:
Builders became part of the public API with Angular 8, although they have been in use for quite a while. I wrote a follow-up piece if you want the details:
Angular CLI
No write-up on Angular tooling would be complete without acknowledging the most popular piece of the ecosystem: the Angular CLI.
It handles everything from scaffolding an application to building and deploying it, plus much more. A lot has already been written about it, so I will keep it short.
For a full list of CLI commands, the official docs are the best reference.
Angular Language Service
Have you come across this one? Check your package.json and you should see the package below.
"@angular/language-service": "~8.2.4"
That package exists so the editor extension can communicate with your project inside VSCode. The extension can be installed from the marketplace.
And that is just the start. If you want autocompletion while defining properties, components, or directives, this extension is a real quality-of-life upgrade.
If you work in Webstorm, like my friend Alexander Poshtaruk, the service is also available there, as well as on Sublime. Instructions are in the official docs.
Schematics Support In IDEs
You are likely familiar with commands such as ng generate component/service/directive <name>
Personally, I prefer the command line, but memorising every command is not required. IDE integrations exist precisely for that. Webstorm provides schema support out of the box. For VSCode, there is a dedicated extension.
Augury
When debugging Angular applications, Augury is a great companion. Besides the usual inspection features, it provides a clear dependency graph for components and services. It works in both Chrome and Firefox.
Angular Tracer For View Updates
Augury is helpful, but it does not expose real-time change detection in the browser. That gap is filled by a browser extension from Alexey Zuev, which I genuinely enjoy using. It supports Angular 4 and above.
NG Run
Another creation by Alexey Zuev. Some might argue StackBlitz looks similar, but NG Run has a few features I appreciate:
- Take a screenshot of your code.
- Run tests online.
- NG Run
Integrated Development Environments (IDEs)
The choice of IDE is completely open. The most common picks are VSCode and Webstorm, while StackBlitz and similar services provide solid browser-based editing.
Redux DevTools
If your app relies on any state management library, this debugging tool is essential. Libraries like NgRx and Akita already integrate with it.
Nx Dev Tools
Nx, built by Nrwl.io, brings strong tooling for both Angular and React apps. It includes Jest and Cypress by default, and it is worth checking out Angular Console as well. One more advantage: if you want NestJS or ExpressJS as your backend, you can add the project easily and share models across the frontend and backend.
Closing Thoughts
The tooling side of Angular tends to get overlooked by many developers. But Angular goes beyond being just a framework — it delivers a solid toolbox for your applications. Best of all, Schematics and Builders are there for you to extend and customise as needed.