Ответ 1

Как отлаживать с помощью углового /cli

В новой версии угловой/кли используется webpack, который не скомпилирует файлы ts в локальный каталог, такой как dist before (до бета 1.0.0-beta.10). Теперь он использует некоторый подход к памяти.

Но вы можете найти файлы ts в инструментах разработчика Chrome на вкладке "Источники".

(новое) Решение для angular/[email protected] и новее

Примечание. Это решение было протестировано с версиями 1.0.0-beta.26 и 1.2.1

Примечание. В этом примере я использовал порт 5321 вместо 4200. Просто используйте свой порт.

Отладка с помощью инструментов разработчика Chrome

Во время запуска службы ng (также используется в запуске npm) вы можете найти свои источники в разделе "Инструменты для разработчиков Chrome": "webpack://":

Отладка приложения Angular 2 с угловым /cli с использованием JetBrains IDE

Просто отредактируйте конфигурацию Run/Debug в Webstorm/PHPStorm следующим образом:

1. Укажите путь удаленного URL-адреса вашего каталога проекта в webpack://.
2. Укажите путь удаленного URL-адреса вашего каталога src в webpack://./src

(старый) Решение для [email protected] -.14

Отладка с помощью инструментов разработчика Chrome

Во время запуска службы ng (также используется в запуске npm) вы можете найти свои источники в разделе "Инструменты для разработчиков Chrome": "webpack://":

Отладка приложения Angular 2 с веб-пакетом angular-cli @с использованием JetBrains IDE

Просто отредактируйте конфигурацию Run/Debug в Webstorm/PHPStorm следующим образом: укажите путь удаленного URL-адреса вашего каталога проекта

webpack:////Users/...FULL_PATH..//на Mac OSX

или

webpack:///C:/...FULL_PATH..//пример в Windows

Обратите внимание: на Windows вам нужно всего 3 слэша, на Mac вам нужно 4 слэша после "webpack:",

Вы также можете проверить свой Путь, перейдя по адресу http://localhost: 4200/main.map и ищите любой файл ".ts". Вы можете легко скопировать путь к этому файлу и вставить его в свой диалог конфигурации IDE.

EDIT: Возможно, вам нужно сопоставить путь, добавляющий "/src" в вашу папку src. Спасибо @born2net

Повеселись.

Ответ 2

ok получил работу, вам нужно сопоставить как root, так и src. см. здесь:

надеюсь, что это поможет кому-то,

позвольте мне добавить, что иногда отладчик пропустит вашу точку останова, поэтому добавьте предупреждение ('foo') или код отладчика непосредственно перед точкой останова.

ТХ

будет добавлять и конвертировать проекты jspm в новый cli Angular 2 Кухонная мойка: http://ng2.javascriptninja.io и источник @https://github.com/born2net/ng2Boilerplate С уважением,

Шон

Ответ 3

2017 ответ на: angular-cli: 1.0.0-beta.26 node: 6.9.2 os: darwin x64

Если у вас возникли проблемы с этим, перейдите на вкладку Сценарии в своем отладчике и попробуйте выровнять сопоставления URL-адресов в соответствии с тем, что вы видите.

Ни один из ответов не помог мне, потому что моя версия angular -cli сопоставила вещи по-другому.

Ответ 4

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

Вот ссылка, которую вы можете установить:

https://augury.angular.io/

Этот инструмент очень полезен при просмотре иерархии вашей маршрутизации в вашем приложении, иерархии модулей и компонентов и обзоре внедрения зависимостей для каждого компонента.

Вот график ввода моего проекта, который иллюстрирует мое приведенное выше объяснение:

Ответ 5

Наконец-то мне помогло добавить дополнительную / (прямую косую черту) после webpack:///, так что есть 4 вместо 3. По умолчанию было 3 косая черта

remote URL указывает на тот же родительский каталог, что и слева, кроме схемы webpack:////.

Также вам не нужно включать компилятор TS, как часто предлагается.

• MacOS
• Angular -CLI 2.4.1
• WebStorm 2016.3