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

Программирование, разработка, тестирование

→

Visual Studio Code (для написания программ на JavaScript, Perl, Python, Java, C#)

→

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

Посмотрели 6024 раз(а)

последнее обновление: 13 апреля 2023

Скачать пример

my_example_angular_8.zip ...
размер: 4 килобайта

Структура файлов:

D:/my_example_angular_8

angular.json файл настройки Angular

package.json файл настройки Node.js (содержит названия пакетов)

tsconfig.json файл настройки TypeScript

.vscode

launch.json файл настройки для Visual Studio Code

src

index.html

main.ts

polyfills.ts

app

app.component.html

app.component.scss

app.component.ts

app.module.ts

На заметку! Если назвать проект с восклицательными знаками например так: D:/my_example_angular_8!!!, тогда будет ошибка при запуске проекта.

Файл angular.json открыть ...

{
     "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"
}

Файл package.json открыть ...

Файл tsconfig.json открыть ...

Файл .vscode/launch.json открыть ...

Файл src/index.html открыть ...

Файл src/main.ts открыть ...

Файл src/polyfills.ts открыть ...

Файл src/app/app.component.html открыть ...

Файл src/app/app.component.scss открыть ...

10)

Файл src/app/app.component.ts открыть ...

11)

Файл src/app/app.module.ts открыть ...

Как запустить пример локально у себя на компьютере?

Шаг 1.
Открываем Visual Studio Code
и выбираем папку

В Visual Studio Code нажимаем на меню File → Open Folder
и выбираем папку D:/my_example_angular8

Шаг 2.
Устанавливаем библиотеки

В Visual Studio Code нажимаем на меню Terminal → New Terminal
Выполним:

npm install

Смотрите картинку: открыть ...

Объяснение:
В этом zip архиве нет node_modules пакетов.
Название и версии пакетов написаны в файле package.json.
Поэтому при выполнении в командной строке npm install пакеты с названием и версии из package.json скачаются из интернета и установятся в папку node_modules.

Шаг 3.
Компилируем проект и запускаем под локальным web server

Выполним:

npm run start

Смотрите картинку: открыть ...

Объяснение:
Команда npm run start запускает скрипт start.
Скрипт start определен в файле package.json.
Файл D:/my_example_angular8/package.json:
{
...
    "scripts": {
        "start": "ng serve"
    }
...
}

Скрипт start запустит angular команду ng serve:
• Команда ng serve создает локальный web server и в браузере мы видим http://localhost:4200/.
• Команда ng serve постоянно следит за изменениями в файлах и обновляет страницу в браузере.

Шаг 4.
Открываем страницу

В Visual Studio Code нажимаем на меню Run → Start Debugging.

Смотрите картинку: открыть ...

Автоматически в браузере Google Chrome откроется новая страница с таким адресом: http://localhost:4200/

Объяснение:
Запускается Google Chrome с адресом http://localhost:4200/
потому что url описан в файле .vscode/launch.json

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

На заметку!
Если поменяли файл ts или html в папке src то в браузере Google Chrome страница сама обновится.

Как angular приложение добавить на web server ?

Шаг 1.
Сборка проекта

Находясь внутри папки D:/my_example_angular_8 выполним в командной строке:

npm run build

Объяснение:
Команда npm run build запускает скрипт build.
Скрипт build определен в файле package.json.
Файл D:/my_example_angular8/package.json:
{
...
    "scripts": {
        "build": "ng build"
    }
...
}

Скрипт build запустит angular команду ng build:
ng build создаст html и js файлы.

Шаг 2.
Копируем на web server файлы

html и js файлы нужно скопировать на web server

Шаг 3.
Открываем страницу в Google Chroome

Чтобы открыть angular приложение нужно открыть браузер Google Chrome и открыть index.html.
Вот например: https://dir.by/developer/angular/example/my_app/index.html

← Предыдущая тема
Создаем новое приложение TypeScript в Visual Studio Code. Отладка приложения. Смотрим в отладке, как по шагам выполняется TypeScript. Точки остановки.

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