Hello World of Angular in Visual Studio Community 2022

Kagula

Mar-5-2023

Introduction

Angular is a front-end framework, here we will build our first angular project in visual studio 2022.

Environment

• Microsoft Windows [version 10.0.19044.2604]
• Visual Studio Community 2022 [version 17.5.0]
• Angular CLI: 15.2.1
• Node: 18.14.2
• Package Manager: npm 9.5.0

Content

Step1, install NodeJS

Download Node-v18.14.2-x64.msi from nodejs.org and install it in the default setting, the default install directory is "C:\Program Files\nodejs".

Use The Taobao image if you in the great wall.

    npm install -g cnpm --registry=https://registry.npmmirror.com
    
    bash

Check the version of NPM

    npm --version
    
    bash

Step2, install TypeScript and Angular CLI

    npm install -g typescript
    
    bash

    npm install -g @angular/cli
    
    bash

The above command will install ng too. The ng module is loaded by default when an AngularJS application is started. The module itself contains the essential components for an AngularJS application to function.

Check the version of ng

    ng v
    
    bash

Step3, New standalone TypeScript Angular Project

Start Visual Studio 2022, and create a new project with the template of "Standalone TypeScript Angular Project " with the default settings.

Press key F5 to run the new project, the first run may take a few minutes but after that will only need a few seconds.

We will see a new console, according to the new console's prompt we open the website "http://localhost:4200/" in internet explorer to see our first angular project run.

Pic1. run the blank new project

Step4, the structure of our new project

pic2. the reference relationship among files in the project

The final step, change the HTML and TS file's content

Change "title = 'helloWorld';" from "title = 'helloWorld kagula';" in the file "app.component.ts " and remove some snippet under "< span>{{ title }} app is running!" in the file "app.componnet.html ", don't need to restart the service , we will see the impact in the internet explorer immediately.

Pic3. See changes after you modified the HTML and TS files in the angular project

Reference

https://angular.io/tutorial