Setup And Run Angular 15 App Locally From VS Code

Introduction

Angular is an open-source framework for building single-page applications (SPA) using web technologies like HTML, CSS, and js. Angular is written in TypeScript and follows TypeScript syntax to write code and that TypeScript code tans compile to JS as output which loads in the browser.

This article demonstrates how to setup, create, and run the latest Angular app from VS Code on a step-by-step approach.

Prerequisite

• IDE - VS Code

Step 1 - Install the latest LTS version of Node.js from https://nodejs.org/en/

Node.js is an open-source, cross-platform JavaScript runtime environment. It helps to run the js code on the server and it also helps to host the application. We need to use nodejs runtime for Angular development. And Node Package Manager (npm) is the tool within nodejs. It resolves the interdependencies of packages.

After installing node js, open the command prompt, and check node -v and npm version.

Step 2 - Install TypeScript

As I already mentioned, Angular follows TypeScript syntax to write code. That’s we need a typescript package to be installed from CMD.

> npm install typescript -g

Here, -g signifies to install globally into your PC (C:\Users\AppData\Roaming\npm\node_modules)

Once installed, let’s check the version of it using > tsc -v command.

Step 3 - Install Angular CLI

Angular CLI is a cmd line tool to create, build, compile, and serve angular app. Using CLI commands we can generate various building blocks like components, routes, pipe, modules, directives, etc of an angular app.

Installing Angular CLI from CMD

To install latest version > npm install @angular/cli -g

To Install specific version > npm install @angular/[email protected] -g

To check Angular CLI installed version > ng version

Angular CLI Options

Options	Usage
Help	ng --help
Build	ng build --env
Build and Run	ng serve
Testing	ng test
End-End Testing	ng e2e

Step 4 - Create a sample Angular app from VS Code

Create an empty folder on the desktop and open that folder from VS Code before beginning to create an app.

Let’s open the terminal and new terminal on VS Code and run the below angular cli command.

>ng new <projectName> --skip-install

Here, --skip-install is an option to skip installing the npm packages while creating a new project.

After you hit enter, it will prompt you to select angular routing Y/N and style sheet format.

Once the sample project is created, we need to go inside into newly created project folder and run npm install command.

> cd <projectName>
> npm install

Step 5 - Run the app and check on the browser

ng serve command will build, compile, bundle, create a development server, and run the app.

>ng serve -open

During ng serve, 5 js build files were created and loaded into the browser. Let’s understand the purpose of those files at high level:

1. vendor.js contains a third-party code that is used as part of package.json in the app.
2. polyfills.js is used to allow the older browser to support newer features.
3. style.js is basically the js version of style.css. Used for dev env only.
4. main.js contains main application code like components, directives, etc, and logic.
5. runtime.js is the utility code used by Webpack to load code at runtime.

In the browser, it’s loaded on default port 4200 http://localhost:4200/

Hope you find this article useful and informative!

Disclaimer: This article is a beginner's guide and setup Angular project for the first time.