In this article, I will explain how to setup an angular 6 development environment in the Visual Studio code editor. We will create our first Angular 6 application.
- Must read What is Angular and Why should I use it
Setup Angular 6 Development Environment
- Basic of TypeScript
- Angular CLI
- Text editor- a visual code
You need to set up your development environment before you can do anything. Find the below steps to set up the angular in the local environment:-
First, you need to install Node.js. Open your browser and type the URL https://nodejs.org/en/ & download node.js, and install it.
After installing node js, open command prompt type node -v to verify that you are at latest node.js version 8.x or greater by running node. Now type npm -v to check npm version. If both the commands show their respective versions it means the node.js is installed successfully.
Go to cmd and write npm install -g @angular/cli command to install CLI. It will install CLI globally where g represents globally.
Download visual studio code editor IDE from https://code.visualstudio.com/ and install it. There are the following things we can do with the IDE:-
- Validation inside custom Angular attributes.
- Detection of misdefined Angular element tags.
- Auto-complete for HTML elements. Auto-complete for Typescript expressions in templates.
- We can view the project directory easily.
- Automatic detection of exception and error. We have got so many IDE for angular like (Web Storm, Visual code, Eclipse, etc.).
- Here we are going to use Web Storm because it is very good for Typescript and HTML/CSS.
Create a new Angular Project
Open your Visual Studio Code editor and open a new terminal window by clicking the Terminal menu. Generate a new project and default app by running the following command: ng new my-app.
The Angular CLI installs the necessary npm packages, creates the project files, and populates the project with a simple default app. This may take some time.
Serve/Run the Application
Go to the project directory and launch the server by using the following command:-
cd my-app, ng -serve
The ng -serve command launch the server, watches your files, rebuilds the app as you
make changes to files. Now open your browser on http://localhost:4200/
I hope you liked this article based on how to setup an Angular 6 development environment in the Visual Studio code, and why should I use it. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.