Create a new application with Angular 8 in Visual Studio Code. Debug the application. See in debugging how to perform TypeScript

Programming, development, testing

→

Visual Studio Code (for writing programs in JavaScript, Perl, Python, Java, C#)

→

Create a new application with Angular 8 in Visual Studio Code. Debug the application. See in debugging how to perform TypeScript

Looked at 5438 times

Create a new application with Angular 8 in Visual Studio Code. Debug the application. See in debugging how to perform TypeScript

last updated: 13 April 2023

Download the example

my_example_angular_8.zip ...
Size: 4 kilobytes

File structure:

D:/my_example_angular_8

angular.json customization file Angular

package.json configuration file Node.js (contains package names)

tsconfig.json customization file TypeScript

.vscode

launch.json configuration file for Visual Studio Code

src

index.html

main.ts

polyfills.ts

app

app.component.html

app.component.scss

app.component.ts

app.module.ts

Note! If you name the project with exclamation marks for example: D:/my_example_angular_8!!!, then there will be an error when starting the project.

File angular.json open ...

{
     "version": 1,

     "projects": {
          "my_example": {
               "projectType": "application",
               "root": "",
               "sourceRoot": "src",

               "architect": {

                    "build": {
                         "builder": "@angular-devkit/build-angular:browser",
                         "options": {
                              "outputPath": "dist/my_example",
                              "index": "src/index.html",
                              "main": "src/main.ts",
                              "polyfills": "src/polyfills.ts",
                              "tsConfig": "tsconfig.json",
                              "aot": false
                         },
                         "configurations": {
                              "production": {
                                   "optimization": true,
                                   "outputHashing": "all",
                                   "sourceMap": false,
                                   "namedChunks": false,
                                   "vendorChunk": false,
                                   "buildOptimizer": true
                              }
                         }
                    },

                    "serve": {
                         "builder": "@angular-devkit/build-angular:dev-server",
                         "options": {
                              "browserTarget": "my_example:build"
                         }
                    }

               }
          }
     },

     "defaultProject": "my_example"
}

File package.json open ...

File tsconfig.json open ...

File .vscode/launch.json open ...

File src/index.html open ...

File src/main.ts open ...

File src/polyfills.ts open ...

File src/app/app.component.html open ...

File src/app/app.component.scss open ...

10)

File src/app/app.component.ts open ...

11)

File src/app/app.module.ts open ...

How do I run the sample locally on my computer?

Step 1.
Open Visual Studio Code
and select the folder

In Visual Studio Code click on the menu File → Open Folder
and select the folder D:/my_example_angular8

Step 2.
Installing libraries

In Visual Studio Code click on the menu Terminal → New Terminal
Let's do:

npm install

See the picture: open ...

Explanation:
There are no node_modules packages in this zip archive.
The name and versions of the packages are written in the file package.json.
Therefore, when executed at the command prompt npm install, packages with the name and versions from package.json will be downloaded from the Internet and installed in the node_modules folder.

Step 3.
Compile the project and run it under the local web server

Let's do:

npm run start

See the picture: open ...

Explanation:
The npm run start command runs the script start.
Script start is defined in file package.json.
File D:/my_example_angular8/package.json:
{
...
    "scripts": {
        "start": "ng serve"
    }
...
}

Script start will run the angular command ng serve:
• The command ng serve creates a local web server and in the browser we see http://localhost:4200/.
• The ng serve command constantly monitors changes in files and updates the page in the browser.

Step 4.
Open the page

In Visual Studio Code click on the menu Run → Start Debugging.

See the picture: open ...

Automatically a new page will open in the browser Google Chrome with the following address: http://localhost:4200/

Explanation:
Runs Google Chrome with address http://localhost:4200/
because url is described in file .vscode/launch.json

{
"version": "0.2.0",
"configurations": [
     {
          "type": "chrome",
          "request": "launch",
          "name": "Launch Chrome",
          "url": "http://localhost:4200/"
     }
]}

Note!
If you have changed the file ts or html in the folder src then in the browser Google Chrome the page itself will refresh.

How do I add the angular app to web server ?

Step 1.
Build the project

Being inside the folder D:/my_example_angular_8 let's run in the command line:

npm run build

Explanation:
The npm run build command runs the script build.
The script build is defined in the file package.json.
File D:/my_example_angular8/package.json:
{
...
    "scripts": {
        "build": "ng build"
    }
...
}

Script build will run the angular command ng build:
ng build will create html and js files.

Step 2.
Copying files to the web server

html and js files need to be copied to web server

Step 3.
Open the page in Google Chroome

To open the angular application you need to open the browser Google Chrome and open index.html.
Here's an example: https://dir.by/developer/angular/example/my_app/index.html

← Previous topic
Create a new application TypeScript in Visual Studio Code. Debug the application. We look in debugging how TypeScript is executed step by step. Breakpoints.

Next topic →
Создаем новое приложение с Angular 9 в Visual Studio Code. Отладка приложения. Смотрим в отладке как по шагам выполняется TypeScript

Your feedback ... Comments ...

Объявления

• What is Visual Studio Code ? Why are Angular and React applications creating and writing using Visual Studio Code ?

• Download and install Visual Studio Code

• Open Visual Studio Code

Settings

• Make the file automatically saved (no need to click on File → Save) in Visual Studio Code

• Make the code tabs instead of spaces in Visual Studio Code

Creating a new application

• Create a new application JavaScript in Visual Studio Code. Debug the application. See in debugging how to perform JavaScript

• Create a new application TypeScript in Visual Studio Code. Debug the application. We look in debugging how TypeScript is executed step by step. Breakpoints.

• Create a new application with Angular 8 in Visual Studio Code. Debug the application. See in debugging how to perform TypeScript

• Создаем новое приложение с Angular 9 в Visual Studio Code. Отладка приложения. Смотрим в отладке как по шагам выполняется TypeScript

• Создаем новое приложение с Angular 12 в Visual Studio Code. Отладка приложения. Смотрим в отладке как по шагам выполняется TypeScript

• Создаем новое приложение с React в Visual Studio Code. Отладка приложения. Смотрим в отладке как по шагам выполняется код

• Создаем новое приложение с Python в Visual Studio Code. Отладка приложения. Смотрим в отладке как по шагам выполняется Python