Create a new web application with Angular 8 in Visual Studio Code. We use: Node.js + Angular (write our component in ts file) + Typescript (convert files ts to js)

Programming, development, testing

→

Angular

→

Create a new web application with Angular 8 in Visual Studio Code. We use: Node.js + Angular (write our component in ts file) + Typescript (convert files ts to js)

Looked at 7382 times Comments 2

Last Comment: (31 January 2024 15:06) Мне очень понравился ваш сайт. Научили программировать... read... Write a comment...

Create a new web application with Angular 8 in Visual Studio Code. We use: Node.js + Angular (write our component in ts file) + Typescript (convert files ts to js)

last updated: 14 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
Создаем новое web приложение с Angular 8. Используем командную строку: npx -p @angular/cli@8.1.0 ng new

Next topic →
Что происходит при запуске Angular 8 приложения? Запуск main.ts файла. Создание модуля.