dir.by  
  Поиск  
Компьютер, программы
Visual Studio Code (for writing programs in JavaScript, Perl, Python, Java, C#)
 Создаем новое приложение с Angular 9 в Visual Studio Code. Отладка приложения. Смотрим в отладке как по шагам выполняется TypeScript 
посмотрели 5204 раз
обновлено: 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 →
Creating a new application with Angular 12 in Visual Studio Code. Debugging the application. Looking at how TypeScript is executed step by step in debugging
 
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
Creating a new application with Angular 9 in Visual Studio Code. Debugging the application. Looking at how TypeScript is executed step by step in debugging
Creating a new application with Angular 12 in Visual Studio Code. Debugging the application. Looking at how TypeScript is executed step by step in debugging
Creating a new application with React in Visual Studio Code. Debugging the application. In debugging, we see how the code is executed step by step
Creating a new application with Python in Visual Studio Code. Debugging the application. See how Python is executed step by step in debugging

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