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

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

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

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

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

Примечание: перед началом работы необходимо проверить наличие последней версии кода visual studio и также установили расширение под названием 'отладчик для Chrome' в коде против.

во-первых, в './ config / webpack.разработка.js'

• use =>devtool: 'source-map'
• вместо => devtool: 'cheap-module-source-map'

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

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

добавить плагин './ config / webpack.разработка.Яш', добавив:

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

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

• новый WriteFilePlugin()

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

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

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

наконец, моя запуск.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/' в webroot. с этой конфигурацией исходные карты включены ./ dist/, но они указывают ./ src/. vscode добавляет абсолютный корень в рабочую область и правильно разрешает файл.

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

для отладки углового кода на стороне клиента нам потребуется установить отладчик для расширения Chrome. Откройте представление расширения (Ctrl + Shift+X) и введите "chrome" в поле поиска. Вы увидите несколько расширений, которые ссылаются на Chrome. Нажмите кнопку Установить для Отладчик для Chrome. Кнопка изменится на установку, а затем, после завершения установки, она изменится на перезагрузку. Нажмите Перезагрузить, чтобы перезапустить VS Code и активировать расширение.

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

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

в частности, добавление ниже для запуска.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: установить отладчик chrome: просто откройте палитру команд (Ctrl + Shift+P) внутри VS Code и type Extensions: Install Extension command. Когда появится список расширений, введите "chrome", чтобы отфильтровать список и установить отладчик для расширения Chrome. Затем вы создадите файл конфигурации запуска.

[подробнее о шаге 1]

Шаг 2: создание и обновление запуск.JSON-файл: два примера запуска.конфигурации json с "запросом": "запуск". Вы должны указать файл или url-адрес для запуска Chrome в локальном файле или url-адресе. Если вы используете url-адрес, установите webRoot в каталог, из которого подаются файлы. Это может быть либо абсолютный путь, либо путь с использованием ${workspaceRoot} (папка, открытая в коде). webRoot используется для разрешения URL-адресов (например,"http://localhost/app.js") в файл на диске (например, "/Users/me/project/app.js"), поэтому будьте осторожны, чтобы он был установлен правильно. обновите содержимое запуска.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 с отключенной веб-безопасностью. Затем я делаю отладку углового приложения, прикрепляя отладчик к chrome.

CMD line для запуска 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}"
        },
    ]
}