Whether you are a new or an experienced Angular developer there are several useful tools to help make your life much easier. Whether you are using versions 2, 4 or 5 (To be released on 23th of this month) it is important to have the necessary tools. Here is a list of tools for angular you might want to consider:
Angular CLI
Setting up a new angular project can be complicated and rather long process. Luckily, Angular Team saw that and decided to create an official tool to help – Angular CLI. Angular CLI helps you create new project, new components, services, directives, guards among others without much work. This is especially useful to newbies trying angular for the first time or still learning their way around. But Angular CLI is more than that. It helps you build your application so that you can run it on a browser or for deployment. During this process, it will remove unnecessary code, remove comments and minify the project to make it lightweight. It will also detect errors on your code and let you correct them. I believe angular cli is a must for any angular developer, whether you are just getting started or experienced. You can learn how to install Angular CLI here.
Yarn Package Manager
Yarn is a package manager developed by Facebook for speed and is supported by Angular CLI. Package managers make it easier to manage project dependencies. Instead of manually downloading JavaScript/CSS file for that great plugin you love, you let a package manager handle that for you. Package managers will handle adding, updating and removing project dependencies.
By default, Angular uses Node Package Manager. And while it’s a capable package manager with countless packages under it, it’s not perfect. Yarn Package manager improves on node package manager by increasing its speed. It is up to 5 times faster than Node package manager. It’s also compatible with all node packages. If you are using NPM (Node Package Manager) to manage your angular packages, switching to yarn is easy. First install Yarn Package Manager into your system by following the instructions found here.
Once you have installed it, open command prompt/PowerShell/terminal and navigate to your project folder (Example: cd path/to/project/folder). Then run the following command:
ng set --global packageManager=yarn
This will set yarn as the global manager for your angular project. Then lastly, initiate yarn on your project by running yarn install command. This will create a yarn.lock file for your project from your package.json. Since yarn uses node module, your already existing dependencies won’t be re-downloaded. To install a new package, run:
yarn add packagename
(Package Name = any node package will do) You can switch back to node package manager by running the following command:
ng set --global packageManager=npm
Augury
I have been using Augury from the beginning to debug angular applications. It is a chrome extension that inspects your application on the web browser. It’s only available for Google chrome and any other browser that accepts chrome extensions (haven’t tried that). In fact, it is the most used Google Chrome Developer Tool extension for debugging and profiling Angular 2+ applications. It’s an opensource effort between Rangle.io and Googles Angular team. Augury helps visualize the application through component trees and visual debugging tools. Developers get immediate insight into their application structure, change detection and performance characteristics. It’s important to note, augury only works on projects in development mode and not in production mode. To learn more about Augury visit their official guide here.
ngRev
I came across this tool a few weeks ago and I have say am impressed. It’s a graphical user interface tool that reverses engineers your existing angular project and helps you view details about the project. It allows you to navigate in the structure of your application and observe the relationship between the different modules, providers and directives. ngRev performs static code analysis which means that you don’t have to run your application to use it. It’s available for all major operating systems: Windows, Linux and Mac, and it’s very easy to learn how to use it. Learn more about ngRev here.
Visual Studio Code
When it comes to rich text editors, everyone has his own preferences, from Sublime, Atom, Bracket, Visual Studio Code among others. What makes Visual Studio Code (VSCode) standout is how it handles typescript out of the box. It provides intellisense, error detection and correction and code formatting straight out of the box, no extensions required. This is because both the language and the text editor are both developed by Microsoft.
Angular 4 primarily uses typescript for development. Typescript is then compiled to JavaScript to run on the web browser. This makes it necessary for one to have a good typescript tool to develop angular apps while eliminating much guess work. Visual Studio code is also completely free. For me, it is one of the best text editors out there, if not the best.
Conclusion
To conclude, these are just some of the tools that can enhance ones’ development experience. If you have an idea of any tool that I left out, please be sure to comment with your suggestion below this article. If you loved this article be sure to share with your friends and if you didn’t, make your feelings known in the comment box below. Thank you and have a lovely day.