Angular CLI 1.7.0 и код Visual Studio - невозможно установить точки останова

Я использую плагин Chrome Debugger в Visual Studio Code для отладки приложения Angular. После обновления до использования angular/cli@1.7.0 мы больше не можем достигать точек останова в коде машинописи в VS Code во время отладки. Если мы вернемся к angular/cli@1.6.7, точки останова снова начнут работать.

Вот мой вывод ng -v:

Angular CLI: 1.7.0
Node: 9.2.0
OS: win32 x64
Angular: 5.2.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.0
@angular-devkit/build-optimizer: 0.3.1
@angular-devkit/core: 0.3.1
@angular-devkit/schematics: 0.3.1
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.0
@schematics/angular: 0.3.1
@schematics/package-update: 0.3.1
typescript: 2.5.3
webpack: 3.11.0

Кто-нибудь еще переживает это?

Источник

4 ответа

Для тех, кто сталкивался с этим, исправление должно изменить ваш launch.json sourceMapPathOverrides следующим образом:

"sourceMapPathOverrides": { 
    "webpack:/*": "${webRoot}/*" 
}

Это исправило это для меня с последней версией @angular/cli (версия 1.7.3).

Ответ был найден здесь.

Источник

Надеюсь, это поможет... Мой случай - Angular CLI 7.2.2:

Webstorm / Intellij - точки останова никогда не попадают, VSCode - точки останова не проверяются / никогда не попадают,отладчик Chrome- точки останова попадают идеально.

Решение: в angular.json установите для evalSourceMap значение "false".

Это запускает Webpack, который Angular CLI использует под капотом для генерации исходных карт в исходный исходный код ("source-map") вместо сгенерированного кода ("eval"). https://webpack.js.org/configuration/devtool/

Смотрите в node_modules@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\browser.js

Конечно, вы можете взломать файл browser.js, чтобы установить другое значение для devtool.

Источник

Да, то же самое здесь.

Иногда я могу с некоторой трудностью достичь желаемой точки останова (похоже, проблема связана с исходной картой, но отладчик все еще функционирует).

Я попытался поиграться с некоторыми настройками в конфигурации запуска отладчика VS-кода ("sourceMaps" и "trace"), но безрезультатно.

В конце концов я откатил @angular/cli до 1.6.8, и он снова работает нормально.

Изменить: Забыл упомянуть, в случае, если это помогает кому-то в поиске этой проблемы - при запуске отладки точки останова исчезают из исходного файла, и его вкладка помечена "встроенный контент только для чтения из карты источника".

Кроме того, @angular/cli 1.7.1 не решает эту проблему.

Источник

То же самое здесь, откат к 1.6.8 (и угловой 5.1.1), чтобы мои контрольные точки снова заработали.

Источник

Если вы используете WorkSpace с 1 или несколькими проектами..

У меня работает: launch.json

"version": "0.2.0",
"configurations": [
    {
        "type": "chrome",
        "request": "launch",
        "name": "ng serve",
        "url": "http://localhost:4300",
        "webRoot": "${workspaceFolder}/ProjectName",
        "sourceMapPathOverrides": { 
            "webpack:/*": "${webRoot}/*" 
        }
    }
]

1- Начать проект ng serve --port 4300

2- Начать отладку

Источник

Установка sourceMapPathOverrides была недостаточной.

В моем случае файл index.html находится в "/src", а компоненты Angular в "/src/app". Я использую @angular/cli 1.7.4, vscode 1.22.2 и Chrome Debugger 4.3.0.

Мне нужно было установить три параметра в файле launch.json.

"sourceMapPathOverrides": { 
    "webpack:/*": "${webRoot}/*"
},
"webRoot": "${workspaceFolder}",
"sourceMaps": true,

sourceMaps не является обязательным, но убедитесь, что он не установлен в false.

Он должен быть установлен для каждой конфигурации файла конфигурации launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Chrome DEBUG 172.22.44.49",
            ...

В документации по исходным картам отладчика chrome говорится, что webRoot устанавливает каталог, из которого отправляются файлы. Но для решения этой проблемы мне пришлось установить его в корневой каталог рабочей области.

Источник
Другие вопросы по тегам