Как вы отлаживаете библиотеку Angular 6 - PullRequest
Новая
       44

Как вы отлаживаете библиотеку Angular 6

0 голосов
/ 09 июня 2018

Я пишу библиотеку Angular 6 и не могу понять, как войти в машинописный текст.

Я создал приложение, используя: ng new mylibapp

Затем я добавил библиотеку, используя:ng g library @abc/cool-lib -p abc

когда я выполняю: ng build @abc/cool-lib

, он генерирует код в папке mylibapp/dist/abc/cool-lib

Как теперь можно отладить этот код и установить точки останова вфайл ts находится по адресу mylibapp/projects/abc/cool-lib/src/lib

Ответы [ 5 ]

0 голосов
/ 24 июля 2019

Начиная с @ angular / cli v7, вы можете добавить следующую конфигурацию в ваш файл angular.json, чтобы включить исходные карты для библиотеки при обслуживании с использованием ng serve: 

{
  "projects": {
    "your-app": {
      "architect": {
        "serve": {
          "options": {
            "vendorSourceMap": true
0 голосов
/ 22 ноября 2018

Настройка теперь (с использованием Angular 7, возможно уже 6,2) довольно прямолинейна:

  • Компиляция библиотеки в режиме наблюдения: ng build [mylib] --watch
  • Запуск приложения с исходными картами поставщиков: ng serve --vendor-source-map

Теперь доступны источники библиотек (в инструментах Chrome / Firefox / ... dev).

Обновление для Angular 7.2:

--vendor-source-map был заменен на --sourceMap=true|false для нг подачи :

  • ng serve --source-map=true

Дальнейшее обновление: --source-map=true к сожалению, не имеет желаемого эффекта.Здесь есть связанный вопрос .

0 голосов
/ 30 июня 2018

Глядя на документы Angular CLI для библиотек , упоминается следующее:

Некоторые аналогичные установки вместо этого добавляют путь к исходному коду непосредственно внутри tsconfig.Это ускоряет просмотр изменений в вашем приложении.

Таким образом, вы можете обновить ваш tsconfig.json, чтобы он ссылался на ваш локальный исходный код вместо встроенной библиотеки.

Использование встроенного проекта: 

 "paths": {
  "abc": [
    "dist/abc"
  ]

Измените его для использования фактического источника: 

"paths": {
  "abc": [
    "projects/abc/src/public_api"
  ]

Есть недостатки, как указано в документации:

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

Но в моем случае это стоило того, чтобы позволить мне выполнить интерактивную отладку в Chrome, а также сразу увидеть изменения, не перестраивая их.Тем не менее, я полностью тестирую встроенный проект за пределами этого рабочего процесса.

0 голосов
/ 28 октября 2018

Начиная с Angular CLI v. 6.1 , вы можете использовать переключатель --vendor-source-map, который позволит вам войти в источник машинописного текста вашей библиотеки при отладке.Попробуйте ng build @abc/cool-lib --vendor-source-map и посмотрите, поможет ли это.Вы также можете использовать переключатель с ng serve.В моем случае я запускаю ng serve для моего приложения, в котором размещена библиотека, и карта источника библиотеки включена.Этот способ также избавляет вас от необходимости редактировать tsconfig.json

0 голосов
/ 27 июня 2018

Проверьте расширение «Отладчик для Chrome» в VSCode, возможно, это поможет вам.

...