dir.by  
  Поиск  
Программирование, разработка, тестирование
Visual Studio Code (для написания программ на JavaScript, Perl, Python, Java, C#)
Создаем новое приложение с Angular 12 в Visual Studio Code. Отладка приложения. Смотрим в отладке как по шагам выполняется TypeScript
  Посмотрели 3091 раз(а)    
 Создаем новое приложение с Angular 12 в Visual Studio Code. Отладка приложения. Смотрим в отладке как по шагам выполняется TypeScript 
последнее обновление: 7 августа 2021
my_example_angular_12.zip ...
размер: 4 kb
Структура файлов:
На заметку! если назвать проект с восклицательными знаками например так: D:/my_example_angular_12!!! то при выполнении будет ошибка
D:/my_example_angular_12
        angular.json                  файл настройки Angular
        package.json                  файл настройки Node.js (содержит названия пакетов)
        tsconfig.json                  файл настройки TypeScript
        tsconfig.app.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
Как запустить пример локально у себя на компьютере?
Шаг 1.
Открываем
Visual Studio Code
и выбираем папку
В Visual Studio Code нажимаем на меню FileOpen Folder
и выбираем папку D:/my_example_angular12
Шаг 2.
Устанавливаем библиотеки
В Visual Studio Code нажимаем на меню TerminalNew 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_angular_12/package.json:
{
...
    "scripts": {
        "start": "ng serve"
    }
...
}

Скрипт start запустит angular команду ng serve:
ng serve это локальный web server, потому что в браузере мы видим http://localhost:4200/
ng serve постоянно следит за изменениями в файлах и обновляет страницу в браузере.
Шаг 4.
Открываем страницу
В Visual Studio Code нажимаем на меню RunStart Debugging

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


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


Объяснение:
Запускается Google Chrome с адресом http://localhost:4200/
потому что файл настройки .vscode/launch.json
{
"version": "0.2.0",
"configurations": [
     {
          "type": "chrome",
          "request": "launch",
          "name": "Launch Chrome",
          "url": "http://localhost:4200/"
     }
]}

создержит
"url": "${workspaceFolder}/index.html"
На заметку!
Если поменяли файл ts или html в папке src то в браузере Google Chrome страница сама обновится.
 
← Предыдущая тема
Создаем новое приложение с Angular 9 в Visual Studio Code. Отладка приложения. Смотрим в отладке как по шагам выполняется TypeScript
 
Следующая тема →
Создаем новое приложение с React в Visual Studio Code. Отладка приложения. Смотрим в отладке как по шагам выполняется код
 
Ваши Отзывы ... комментарии ...
   
Вашe имя
Ваш комментарий (www ссылки может добавлять только залогиненный пользователь)

  Объявления  
  Объявления  
 
Что такое код Visual Studio? Почему приложения Angular и React создаются и пишутся с использованием Visual Studio Code ?
Скачать и установить Visual Studio Code
Открываем Visual Studio Code
Параметры
Делаем чтобы файл автоматически сохранялся (не надо нажимать на File → Save) в Visual Studio Code
Делаем чтобы в коде были tabs вместо spaces в Visual Studio Code
Создаем новое приложение
Создаем новое приложение JavaScript в Visual Studio Code. Отладка приложения. Смотрим в отладке как по шагам выполняется JavaScript
Создаем новое приложение TypeScript в Visual Studio Code. Отладка приложения. Смотрим в отладке, как по шагам выполняется TypeScript. Точки остановки.
Создаем новое приложение с Angular 8 в Visual Studio Code. Отладка приложения. Смотрим в отладке как по шагам выполняется TypeScript
Создаем новое приложение с Angular 9 в Visual Studio Code. Отладка приложения. Смотрим в отладке как по шагам выполняется TypeScript
Создаем новое приложение с Angular 12 в Visual Studio Code. Отладка приложения. Смотрим в отладке как по шагам выполняется TypeScript
Создаем новое приложение с React в Visual Studio Code. Отладка приложения. Смотрим в отладке как по шагам выполняется код
Создаем новое приложение с Python в Visual Studio Code. Отладка приложения. Смотрим в отладке как по шагам выполняется Python

  Ваши вопросы присылайте по почте: info@dir.by  
Яндекс.Метрика