Angular Tools You Should be Aware Of
As an Angular Developer, we often focus on using the overall framework. This isn’t wrong since Angular was designed to have a uniform method of building great applications. But let's see the Angular tools you should be aware of.
In this blog post, we will learn about the tools you should be aware of as an Angular Developer.
Introduction
As an Angular Developer, we often focus on using the overall framework. This isn’t wrong since Angular was designed to have a uniform method of building great applications. However, Angular also offers great tooling support. The tooling that is included with Angular is freely available and easy to use.
So let’s go through each tool you should be aware of:
Typescript
When Angular Team started working Typescript was selected as the go-to language, and this was the reason I personally chose to learn Angular. This was my feeling when I started learning TypeScript. TypeScript is adding a lot of new features and 3.7 is around and a stable version will be released soon, to keep yourself updated, refer the official documentation.
Angular Compiler
As a developer, we only care about ng build command, but Angular Compiler does more than that behind the scene. As per Angular documentation, Angular Compiler runs in 3 phases.
- Code Analysis
- Code Generation
- Template Type Checking
To read more about Angular Compiler refer the contents below :
- https://angular.io/guide/aot-compiler#how-aot-works
- https://medium.com/angular-in-depth/a-deep-deep-deep-deep-deep-dive-into-the-angular-compiler-5379171ffb7a
- https://medium.com/angular-in-depth/inside-ivy-exploring-the-new-angular-compiler-ebf85141cee1
Webpack
Webpack is the most important tool we have, which was added after Angular 2 to avoid manual configuration using systemJS. And If you are wondering like below guy as you have never used it with Angular, let me tell you are using it from Angular 4 and still using it
Ever wondered what happens when we run ng serve, ng build command?
"builder": "@angular-devkit/build-angular:browser"
"builder": "@angular-devkit/build-angular:dev-server"Do above lines looks familiar to you?
Yes, you are right they are in your angular.json inside build and serve.
But how are they related to webpack?
The above code is for dev-server if you notice line number 10–14, which is below code, they are coming for build-webpack which is implemented as part of @angular/devkit.
import { DevServerBuildOutput, WebpackLoggingCallback,
runWebpackDevServer,} from '@angular-devkit/build-webpack'The below folder contains the entire source code for webpack inside @angular/devkit.
And if you have used webpack as a tool for Javascript, you must be wondering where is the config file as we need one for webpack. If you have an Angular Application created go to the below path.
node_modules\@angular\cli\models\webpack-config.jsAre you more comfortable directly using your own webpack config, or wants to add your config to existing configuration and want freedom?
Angular got you covered, the builders can be extended there are many custom builders available.
Angular Schematics
If I have to describe Angular Schematics in one word its
The Angular Schematics is what lets you create Components, modules, and services. Angular Schematics also lets you create your own schematics, or override the default options. Refer below blog post on how to create one by Natalia Venditto
And if you are looking to override the default options without creating one refer to my blog post
Angular Builders
This is what I feel about Builders ?
Builders were exposed as public API with Angular 8 release. But we have been using them for long. you can read my blog post below to know more about builders.
Angular CLI
This blog post would be incomplete if don’t mention the most important and widely loved tool Angular CLI.
Angular CLI lets us create an Application, build and deploy it and many more. There is already a lot written about CLI.
If you want to see the complete list of Angular CLI commands refer to the official docs.
Angular Language Service
Ever heard about it, not sure go to package.json and you will find the below package.
"@angular/language-service": "~8.2.4"The package is required so the extension can work you in VSCode, you can install the extension from here.
But wait there’s more! Have you ever wondered if we can get suggestions as you build properties, components, and directives? Install this today and it will improve your overall experience.
Do you love Webstorm like my friend Alexander Poshtaruk it is also available for Webstorm and even Sublime, to install refer the docs.
Schematics Extension For IDE
You must be aware of several commands like ng generate component/service/directive <name>
I personally prefer using commands, but in case you don’t remember them “no problem.” There are tools available that have got you covered. Webstorm has built-in support for Schematics. For VSCode, refer to this extension.
Augury
Augury is the best tool to debug your application, it also gives you a nice dependency graph for components and services. It is supported by Chrome and Firefox.
Angular Tracer for View Updates
Augury is an awesome tool, apart from few functionalities which it misses,one fo them is to show real-time change detection on the browser, this is where the extension written by Alexey Zuev comes handy and I totally love it. It supports Angular 4+.
Ng Run
Another tool created by Alexey Zuev you may argue that StackBlitz looks a lot similar, but this tool but there are few features I totally love.
- Ability to take a screenshot for your code.
- Ability to run the test cases online.
- https://ng-run.com/
Integrated Development Environment (IDE)
You are free to use any IDE of your choice, the most widely used are VSCode, Webstorm. Even there are few online editors available like StackBlitz.
Redux Dev Tools
If you are using any State management framework, this is a must-have tool for debugging. Used by NgRx, Akita and many more libraries.
Nx Dev Tools
Nx from Nrwl.io offers great tooling support for Angular as well as react applications. It comes with default support for Jest and Cypress and do check out Angular Console. The other advantage is when you want to use NestJS or ExpressJS as your backend, you can easily add the project and share the models between FrontEnd and BackEnd.
Conclusion
A lot of developers ignore the tooling support in the Angular CLI. Angular is more than just a framework and offers great build tools that help with your application. It gives you the free ability to use Schematics and Builders along the way.