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

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

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

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

После долгих исследований я нашел следующие шаги:

Прежде чем начать, убедитесь, что у вас установлена ​​последняя версия кода 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": true

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

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

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

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

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

Укажите 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: не удается подключиться к цели: подключите ECONNREFUSED

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

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

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

Примечание: - Перед тем как начать, вы должны проверить, установлена ​​ли у вас последняя версия кода Visual Studio, а также установлено ли расширение под названием « Отладчик для Chrome » в VS Code.

Во-первых, в './config/webpack.dev.js'

• используйте => devtool: 'source-map'
• вместо => devtool: 'cheap-module-source-map'

Затем установите и используйте плагин write-file-webpack-plugin:

• npm install --save write-file-webpack-plugin

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

• const WriteFilePlugin = require ('write-file-webpack-plugin');

под подключаемыми модулями 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 добавляет абсолютный корень к рабочей области и правильно разрешает файл.

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

Для отладки кода Angular на стороне клиента нам необходимо установить расширение Debugger for Chrome. Откройте представление «Расширения» (Ctrl + Shift + X) и введите «хром» в поле поиска. Вы увидите несколько расширений, которые ссылаются на Chrome. Нажмите кнопку «Установить» для отладчика для Chrome. Кнопка изменится на «Установка», а после завершения установки изменится на «Обновить». Нажмите Reload, чтобы перезапустить VS Code и активировать расширение.

Нам нужно изначально настроить отладчик. Для этого перейдите в представление отладки (Ctrl + Shift + D) и нажмите кнопку с шестеренкой, чтобы создать файл конфигурации отладчика launch.json. Выберите Chrome из раскрывающегося списка «Выбрать среду». Это создаст файл launch.json в новой папке .vscode в вашем проекте, который включает конфигурацию для запуска веб-сайта или подключения к работающему экземпляру. В нашем примере нам нужно сделать одно изменение: изменить порт с 8080 на 4200.

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

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

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

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

{
  "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/*"
      }
    }
  ]
}

Эти моды 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}/*" }

Это проверено и проверено -

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

[Подробнее об этапе 1]

Шаг 2: Создайте и обновите файл launch.json: два примера конфигураций launch.json с "запросом": "запуск". Вы должны указать файл или URL-адрес для запуска Chrome для локального файла или URL-адреса. Если вы используете URL-адрес, установите webRoot в каталог, из которого обслуживаются файлы. Это может быть абсолютный путь или путь с использованием $ {workspaceRoot} (папка, открытая в Code). 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"
        },
    ]
}

[Подробнее о шаге 2]

Мне нужно использовать, CORSпоэтому я открываю Chrome с отключенной веб-безопасностью. Затем я отлаживаю приложение Angular, подключив отладчик к хрому.

Строка CMD для запуска Chrome с отключенной веб-безопасностью:

cd "C:\Program Files (x86)\Google\Chrome\Application\"
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security --remote-debugging-port=9222

launch.json файл для подключения отладчика:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceFolder}"
        },
    ]
}

Ответ Санкета был правильным, но у меня были некоторые проблемы с этим.

Во-первых, Launch.json находится в каталоге «.vscode» проекта, а во-вторых, номер порта должен совпадать с портом сервера по умолчанию, который вы используете для запуска приложения. Я использую ng serve из cmd для запуска моего проекта, а номер порта по умолчанию был 4200 , поэтому я изменил файл launch.json следующим образом.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceFolder}"
        }
    ]
}