dir.by  
Программирование, разработка, тестирование
Visual Studio Code (для написания программ на JavaScript, Perl, Python, Java, C#)
Создаем новое приложение с Angular 9 в Visual Studio Code. Отладка приложения. Смотрим в отладке как по шагам выполняется TypeScript
  Посмотрели 3285 раз(а)    
 Создаем новое приложение с Angular 9 в Visual Studio Code. Отладка приложения. Смотрим в отладке как по шагам выполняется TypeScript 
последнее обновление: 7 августа 2021
my_example_angular_9.zip ...
размер: 4 kb
Структура файлов:
На заметку! если назвать проект с восклицательными знаками например так: D:/my_example_angular_9!!! то при выполнении будет ошибка
D:/my_example_angular_9
        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
Как запустить пример локально у себя на компьютере?
Шаг 1.
Открываем
Visual Studio Code
и выбираем папку
В Visual Studio Code нажимаем на меню FileOpen Folder
и выбираем папку D:/my_example_angular9
Шаг 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_9/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 8 в Visual Studio Code. Отладка приложения. Смотрим в отладке как по шагам выполняется TypeScript
 
Следующая тема →
Создаем новое приложение с Angular 12 в Visual Studio Code. Отладка приложения. Смотрим в отладке как по шагам выполняется TypeScript
 
Ваши Отзывы ... комментарии ...
   
Ваш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  
Яндекс.Метрика