dir.by  
  Search  
Programming, development, testing
Visual Studio Code (for writing programs in JavaScript, Perl, Python, Java, C#)
Создаем новое приложение с Angular 9 в Visual Studio Code. Отладка приложения. Смотрим в отладке как по шагам выполняется TypeScript
  Looked at 2830 times    
 Создаем новое приложение с Angular 9 в Visual Studio Code. Отладка приложения. Смотрим в отладке как по шагам выполняется TypeScript 
last updated: 7 Augusta 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 страница сама обновится.
 
← Previous topic
Create a new application with Angular 8 in Visual Studio Code. Debug the application. See in debugging how to perform TypeScript
 
Next topic →
Создаем новое приложение с Angular 12 в Visual Studio Code. Отладка приложения. Смотрим в отладке как по шагам выполняется TypeScript
 
Your feedback ... Comments ...
   
Your Name
Your comment (www links can only be added by a logged-in user)

  Объявления  
  Объявления  
 
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

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