Отладка и запуск Angular2 Typcript с кодом Visual Studio?

Question

Отладка & Запуск Angular2 с помощью Visual Studio Code?

Я пытаюсь отлаживать приложения машинописи Angular2 с VS кодом https://angular.io/guide/quickstart

Может кто-нибудь пожалуйста, поделитесь шагами для отладки & запуска с VS кода?

Answer 1

После долгих исследований, я нашел эти steps-

Перед тем, как начать, убедитесь, что у вас есть последняя версия VS кода. Вы можете проверить последнюю версию - Справка> Проверить наличие обновлений или О программе.

1. Установите расширение под названием «Отладчик для Chrome». После завершения установки перезапустите код VS.

2. Перейдите в окно отладки, откройте launch.json с помощью Chrome.

3. В разделе конфигурации Launch.json используйте ниже конфигурации

   { 
       "name": "Launch localhost with sourcemaps", 
       "type": "chrome", 
       "request": "launch", 
       "url": "http://localhost:3000/Welcome", 
       "sourceMaps": true, 
       "webRoot": "${workspaceRoot}" 
   } 
   

4. В tsconfig.json, убедитесь, что у вас есть "sourceMap": истинный

Это завершает параметры отладки среды , Теперь, прежде чем приступать к отладке, убедитесь, что все существующие экземпляры Chrome.exe закрыты. Подтвердить из диспетчера задач ИЛИ Использовать команду DOS «killall chrome»

5. Запустите проект, используя команду запуска npm и Chrome в качестве браузера по умолчанию.

6. После успешного запуска приложения вы получите номер порта. Скопируйте URL-адрес из браузера Chrome и вставьте в ссылку выше. (ПРИМЕЧАНИЕ. Если вы используете маршрутизацию в своем приложении, то URL-адрес должен был бы быть указан выше, иначе он будет заканчиваться index.html и т. Д.)

7. Теперь размещайте точки останова, где бы вы ни находились, в своих машинописных файлах.

8. Опять же, перейдите в окно отладки в VS-коде и нажмите Run. Ваша вкладка/экземпляр, связанный с отладчиком, будет выглядеть ниже.

Answer 2

Укажите UserDataDir - это позволит избежать столкновений с другими Chrome случаях вы, возможно, уже работает. Я заметил из-за этого, Chrome просто перестает слушать любой порт, который вы указали. Ниже я использую, и это здорово!

{ 
    "name": "Launch", 
    "type": "chrome", 
    "request": "launch", 
    "url": "http://localhost:3000/#/about", 
    "port": 9223, 
    "sourceMaps": true, 
    "diagnosticLogging": true, 
    "webRoot": "${workspaceRoot}", 
    "userDataDir": "${workspaceRoot}/out/chrome" 
} 

Благодаря @reecebradley - GitHub: Cannot connect to the target: connect ECONNREFUSED

Answer 3

Я имел проблемы с этим, и в то время как @Sankets ответ помог именно этот вопрос, который решил это для меня https://github.com/angular/angular-cli/issues/2453.

В частности добавив ниже launch.json

"sourceMapPathOverrides": { 
    "webpack:///c:/foo/bar/angular-project/*": "${workspaceRoot}/*" 
} 

Answer 4

Эти модов launch.json работал для меня на MacOS, что позволило мне получить отладчик & точки останова, работающие в новом экземпляре Chrome в сеансе отладки ..

// This forces chrome to run a brand new instance, allowing existing 
// chrome windows to stay open. 
"userDataDir": "${workspaceRoot}/.vscode/chrome", 
"webRoot": "${workspaceRoot}", 
"sourceMaps": true, 
"sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" } 

Answer 5

У меня была аналогичная проблема, но в моем проекте также был включен веб-пакет, который привел к отказу вышеуказанных решений. Пройдя через Интернет я нашел решение в потоке на GitHub:

https://github.com/AngularClass/angular2-webpack-starter/issues/144#issuecomment-218721972

Во всяком случае, это то, что было сделано.

Примечание: - Перед тем, как начать вы должны проверить, есть ли у вас последняя версия Visual Studio кода, а также установили расширение под названием «Debugger for Chrome» в ВС РФ.

Во-первых, в

• использования './config/webpack.dev.js' =>devtool: 'источник-карта'
• вместо =>devtool:' дешево-модуль -source-карта»

Затем установить и использовать для записи файла-WebPack-плагин:

• НПМ установить --save рецензия файл-WebPack-плагин

Добавьте плагин»./config/webpack.dev.js', добавив:

• Const WriteFilePlugin = требовать ('записи файла-WebPack-плагин');

Под плагинами Webpack вверху. Продолжайте добавлять:

• новый WriteFilePlugin()

к списку плагинов после нового нового DefinePlugin(), т.е.

plugins:[ 
    new DefinePlugin({....}), 
    new WriteFilePlugin(), 
    .... 
] 

Это гарантирует, что исходные карты записываются на диск

Наконец, мой launch.json приведен ниже.

{ 
    "version": "0.2.0", 
    "configurations": [{ 
     "name": "Launch Chrome against localhost, with sourcemaps", 
     "type": "chrome", 
     "request": "launch", 
     "url": "http://localhost:3000/", 
     "runtimeArgs": [ 
      "--user-data-dir", 
      "--remote-debugging-port=9222" 
     ], 
     "sourceMaps": true, 
     "diagnosticLogging": true, 
     "webRoot": "${workspaceRoot}", 
     "userDataDir": "${workspaceRoot}/.vscode/chrome" 
    }, 
    { 
     "name": "Attach to Chrome, with sourcemaps", 
     "type": "chrome", 
     "request": "attach", 
     "url": "http://localhost:3000/", 
     "port": 9222, 
     "sourceMaps": true, 
     "diagnosticLogging": true, 
     "webRoot": "${workspaceRoot}" 
    }] 
} 

Обратите внимание на отсутствие «/ dist /» в веб-корне. с этой конфигурацией исходные карты находятся в ./dist/, но они указывают на ./src/.vscode добавляет абсолютный корень в рабочую область и правильно решает файл.

Answer 6

Для углового семени:

{ 
    "version": "0.2.0", 
    "configurations": [ 
    { 
     "name": "Debug with chrome", 
     "type": "chrome", 
     "request": "launch", 
     "url": "http://localhost:5555", 
     "sourceMaps": true, 
     "webRoot": "${workspaceRoot}/src/client", 
     "userDataDir": "${workspaceRoot}/out/chrome", 
     "sourceMapPathOverrides": { 
     "app/*": "${webRoot}/app/*" 
     } 
    } 
    ] 
} 

Answer 7

Это один испытанный -

Шаг 1: Установить хром отладчик: просто откройте командную палитру (Ctrl + Shift + P) внутри VS Код и тип Расширения: установите команду «Расширение». Когда появится список расширений, введите «chrome» для фильтрации списка и установки расширения отладчика для Chrome. Затем вы создадите файл конфигурации запуска.

[More Details of Step 1]

Шаг 2: Создание и обновление файла launch.json: Два примера launch.json конфиги с "просьбой": "запуска". Вы должны указать либо файл, либо URL-адрес для запуска Chrome на локальный файл или URL-адрес. Если вы используете URL-адрес, установите webRoot в каталог, из которого поданы файлы. Это может быть либо абсолютный путь, либо путь с использованием $ {workspaceRoot} (папка открыта в коде). webRoot используется для разрешения URL-адресов (например, «http://localhost/app.js») в файл на диске (например, «/Users/me/project/app.js»), поэтому будьте осторожны, чтобы он был установлен правильно. обновление Содержание launch.json файла следующим образом-

{ 
    "version": "0.1.0", 
    "configurations": [ 
     { 
      "name": "Launch localhost", 
      "type": "chrome", 
      "request": "launch", 
      "url": "http://localhost/some_name", 
      "webRoot": "${workspaceRoot}/wwwroot" 
     }, 
     { 
      "name": "Launch index.html (disable sourcemaps)", 
      "type": "chrome", 
      "request": "launch", 
      "sourceMaps": false, 
      "file": "${workspaceRoot}/index.html" 
     }, 
    ] 
} 

[More Details of Step 2]

Answer 8

Вот официальный Visual Studio код документации о том, как отлаживать Угловое в VSCode https://code.visualstudio.com/docs/nodejs/angular-tutorial#_configure-the-chrome-debugger

To debug the client side Angular code, we'll need to install the Debugger for Chrome extension. Open the Extensions view (Ctrl+Shift+X) and type 'chrome` in the search box. You'll see several extensions which reference Chrome. Press the Install button for Debugger for Chrome. The button will change to Installing then, after completing the installation, it will change to Reload. Press Reload to restart VS Code and activate the extension.

We need to initially configure the debugger. To do so, go to the Debug view (Ctrl+Shift+D) and click on gear button to create a launch.json debugger configuration file. Choose Chrome from the Select Environment dropdown. This will create a launch.json file in a new .vscode folder in your project which includes configuration to both launch the website or attach to a running instance. We need to make one change for our example: change the port from 8080 to 4200.