Cory Rylan

My name is , Google Developer Expert, Speaker, Software Developer. Building Design Systems and Web Components.

Follow @coryrylan
Angular

Angular Local Development Setup

Cory Rylan

- 2 minutes

Updated

This article has been updated to the latest version Angular 17 and tested with Angular 16. The content is likely still applicable for all Angular 2 + versions.

Angular has moved from a framework to now a platform to develop rich UI across mobile and desktop. There are many ways to set up a development environment and build process for Angular apps. In this short post, I'll go over the setup that I use on both my Linux/MacOS and Windows machines.

Build / Project

First I'll start with how I build and deploy my Angular applications. All of my
projects currently use the Angular CLI. The Angular Command Line Interface allows developers to create, scaffold and build Angular applications quickly. The CLI is still in beta but is quickly gaining traction and a lot of support/improvements from the Angular team.

Angular CLI

Editor

There are many great editors for Angular Applications, but a couple, in particular, stands out. First is Webstorm . Webstorm is a full-fledged IDE for JavaScript development and has all the bells and whistles. Webstorm does have a paid license but is well worth it.

Angular CLI

Next is my favorite editor that I use all the time, Visual Studio Code. Visual Studio Code is a free cross-platform editor with great TypeScript support which is critical for a good Angular development experience. Visual Studio Code is very fast and lightweight. It has a great plugin system as well. Here is a screenshot of some of the plugins I use that give an excellent editor experience for Angular apps.

Angular CLI Visual Studio Plugins

Deployment

Angular is not very opinionated on how its deployed and what backend stack its hosted on. I deploy Angular apps a couple of different ways, some on .NET stacks and others on NodeJS. My favorite is Firebase. Firebase has a hosting feature that is great for single page apps and has HTTP2 support for great performance. Learn more about Deploying Angular apps to Firebase here.

One last note I am looking forward to an update in the works to the Angular CLI that adds Universal Angular support. Universal allows Angular apps to run on the server so we can get excellent SEO support and fast first time renders.

Summary

In summary, there are hundreds of tools that are available that work great with Angular projects. These are just the subset that I use. If you have your own setup, you enjoy, please feel free to share in the comments.

Twitter Facebook LinkedIn Email
 

No spam. Short occasional updates on Web Development articles, videos, and new courses in your inbox.

Related Posts

Angular

Creating Dynamic Tables in Angular

Learn how to easily create HTML tables in Angular from dynamic data sources.

Read Article
Web Components

Reusable Component Patterns - Default Slots

Learn about how to use default slots in Web Components for a more flexible API design.

Read Article
Web Components

Reusable Component Anti-Patterns - Semantic Obfuscation

Learn about UI Component API design and one of the common anti-patterns, Semantic Obfuscation.

Read Article