How to Install Angular Core in Visual Studio Code
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.
https://damienbod.com/2020/02/04/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.
Links:
https://nodejs.org/en/download/
https://classic.yarnpkg.com/en/docs/install/#windows-stable
https://git-scm.com/download/win
https://gitextensions.github.io/
https://cli.angular.io/
https://code.visualstudio.com/
https://marketplace.visualstudio.com/items?itemName=loiane.angular-extension-pack
https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
How to Install Angular Core in Visual Studio Code
Source: https://damienbod.com/2020/05/13/getting-started-with-angular-development-2020/