Angular Toolbox

in this article i will introduce you some tools that makes development on angular projects more easier, fast and fun.

• Angular CLI.
• Angular Augury.
• Visual Studio Code and some extensions.
• Stackblitz

1. Angular CLI

The Angular CLI is a tool to initialize, develop, scaffold and maintain Angular applications

Without a doubt that angular cli is a must now for any new project, starting from initialize, scaffold to deployment on a server a lot of repeated tasks can be done without writing any single line of code and that’s make us focus on our app business.

I wrote about angular-cli before for more details make sure to check out this articles.

Angular CLI special cases

Angular CLI Features For Faster Development

2. Angular Augury

A Google Chrome Dev Tools extension for debugging Angular 2 applications.

what Angular Augury can do for you

1. view components tree for your app
2. view properties for selected component ( like Change Detection strategy, input and output ) and you can triger output value from this tool
3. view Injector Graph for selected component
4. view router tree for your app

Note: this extension working only in development mode make sure to not activate production mode.

3. Visual Studio Code

some features that make this editor more than awesome built-in Git, built-in command line, IntelliSense for a lot of language out of the box specially typescript that we use to develop angular app and finally extensions.

This is a list of very important extensions that make development of angular application more easier and fast.

Angular Package

• Angular Language Service
  Angular development goes beyond TypeScript with HTML template, This extension provides a rich editing experience for Angular templates, both inline and external templates including:
  1. Completions lists
  2. AOT Diagnostic messages
  3. Quick info
  4. Go to definition
• Angular v5 Snippets
  Angular 5 Snippets for TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout.
• Angular2-inline
  It extends the javascript and typescript colorizers to add Angular2 specific highlighting for inline html and css, Code completion, highlighting, and hover information for inline html.
• Angular Files
  Quickly scaffold angular file templates.

JavaScript & TypeScript

• Path Intellisense
  Visual Studio Code plugin that autocompletes filenames.
• Auto Import
  Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX
• JavaScript (ES6) code snippets
  This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript).
• TSLint
  Integrates the tslint linter for the TypeScript language into VS Code.
• JSON to TS
  Convert JSON object to typescript interfaces.

4. stackblitz

“ Online VS Code IDE for Angular & React.”

it’s simplest and easy way to prototyping your angular app without having to create new angular-cli project on your machine and here are some of major benefits come with this tool.

• Intellisense
• Hot reloading
• Import NPM packages
• Keep editing while offline
• Hosted app URL

If you enjoyed this article, please click that little green heart below. That would be incredible.