Run your First Angular Hello World Project in Microsoft Visual Studio Code IDE. Visual Studio Code is one of the best editors for developing Angular applications.
If you already downloaded Visual Studio Code Editor follow the below steps to begin your first application in Angular.
Getting Started with Angular Typescript Project in Visual Studio Code
Step 1: Open Command Prompt
Create a Folder called CodeWorkspace or any folder name of your choice.
Step 2: Create New Angular Project
Create a New Angular Project using the ng new <projectname> command.
In the command prompt, navigate to the CodeWorkspace folder and enter the following command.
ng new HelloAngularApp
For First Angular Application, routing is not needed. So choose N (No) option.
Step 2: Open Visual Studio code
Navigate to the created project and Right click the folder and select the Open with code option or in the command prompt run the following code dot command
I choose the command prompt to open the Visual Studio Code Editor. Go to drive:\CodeWorkspace>HelloAngularApp> and type code <dot> command.
code .
When you open a TypeScript file for the first time in the editor, an extension popup will open in the right bottom corner of Visual Studio Code to install the TypeScript extension. Install it.
The generated Angular application structure will look like in the below picture.
Step 3: Edit AppComponent HTML template
Expand src and app folder. You will see 4 files,
app.component.css - For adding Stylesheet
app.component.html - HTML Template
app.component.spec.ts - For Writing Test cases
app.component.ts - Typescript class file
Delete the existing generated Html content in app.component.html and write your customized code.
<span>{{ title }} app is running!</span>
Step 4: Start Angular Application
Click Terminal Menu in the editor and select New Terminal. In the terminal enter the following command
ng serve
This will compile and start the angular app server.
Step 5: Open the browser and enter the URL,
http://localhost:4200/
Now you should see the text HelloAngularApp app is running! in the browser window. A similar example is shown in the eclipse editor.