Getting started with Angular development 2020

This post shows how you could setup your development environment to create and manage Angular applications. Of course many other tools and ways could be used to develop Angular applications, not just the ones used here, but this setup works great for me.

Install Node.js, npm or yarn, git

Before you can install the Angular tools, your host operating system requires Node.js and npm. Install these first.

Download and install Node.js

Update npm to the latest version.

npm install -g npm

Some people prefer to use yarn, instead of npm. This is optional, but you could also download and install yarn.

Yarn

Nearly all code is hosted using git now. Install this.

git

I like to use Git Extensions to manage my branches, merge, and sove conflicts using this and kdiff. This runs on top of git. You do not need this, but you can use any tool of your choice, or even git cmd if you want. VS Code also has a git tool, which some people prefer to use.

Download and install Git Extensions

Install Angular CLI

When developing Angular, Angular CLI provides a great way of setting up you projects, and adding all the latest and best Angular features. This is a great tool to use.

Download and install Angular CLI

Install Visual Studio Code

Visual Code provides a great UI to develop Angular applications.

Download and install Visual Studio Code

Install Visual Studio Code extensions

Developing Angular in VS Code without any extensions is not the best. The development experience for creating Angular applications in VS Code can be massively improved by installing some extensions. I required the following three which I consider a must for Angular development.

Angular Extension Pack

https://marketplace.visualstudio.com/items?itemName=loiane.angular-extension-pack

vscode-icons

https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

Prettier – Code formatter

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Setup HTTPS for development

When developing applications, you should develop using HTTPS and test all in HTTPS. For example, if you are using a Secure Token Server to authenticate, this will also be run in HTTPS as with your API. Then you can develop with the correct HTTPS configurations and block HTTP completely.

Create a localhost certificate so that the Angular application can run in HTTPS with your certificate and not that from the default node_module package.

Here’s a blog which explain how to create certificates using .NET Core for a Vue.js application, but the certificate works perfectly for Angular as well. You could create certificates with other tools as well. For windows, also create a pfx export, so that you can add this to your trusted root.

Creating Certificates in .NET Core for Vue.js development using HTTPS

Copy paste your certificates to the dev somewhere. In the angular.json file, which was created when you created the Angular-CLI project, add the following:

"serve": {
	"builder": "@angular-devkit/build-angular:dev-server",
	"options": {
		"browserTarget": "<your-project>:build",
		"sslKey": "certs/dev_localhost.key",
		"sslCert": "certs/dev_localhost.pem",
		"port": 4203
	},

or use could just update the package.json scripts.

By not changing the angular.json, it will probably be easier to maintain the Angular app over time, as this can change with each release.

"start": "ng serve --ssl true --ssl-key ./certs/dev_localhost.key --ssl-cert ./certs/dev_localhost.crt"

I like to use the light Visual Studio theme in VS Code, but some prefer the dark theme. This can be changed in the preferences. Now your ready to create and develop Angular applications.