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

Я пишу библиотеку 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


typescript angular angular-cli ng-packagr angular-cli-v6
person JoAMoS    schedule 09.06.2018    source источник

Ответы (5)


arrow_upward
14
arrow_downward

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

{
  "projects": {
    "your-app": {
      "architect": {
        "serve": {
          "options": {
            "vendorSourceMap": true
person Ravi Mashru    schedule 24.07.2019
comment
Это правильный ответ. Можно было бы использовать переключатель --vendor-source-map, но это не рекомендуется. Вместо этого вы используете этот переключатель angular.json. - person Gary; 27.07.2019
comment
Ура! Я думал, что это будет намного сложнее понять. Это сработало сразу. Спасибо! - person HankScorpio; 17.10.2019
comment
Идеальный ответ, который я искал. - person Arul Rozario; 28.11.2019
comment
варианты: {sourceMap: {скрипты: правда, стили: правда, поставщик: правда}} - person John Duffy; 29.01.2021

arrow_upward
13
arrow_downward

В документах Angular CLI по библиотекам упоминается следующее. :

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

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

Используя построенный проект:

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

Измените его, чтобы использовать фактический источник:

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

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

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

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

person Andy Kachelmeier    schedule 30.06.2018
comment
Это работает хорошо для меня. И, как уже упоминалось, решает как проблемы отладки машинописного текста, так и просмотра изменений без пересборки библиотеки. - person reads0520; 05.07.2018
comment
У меня это также очень хорошо работает в проекте с большим количеством библиотек. Большое спасибо. - person Jie; 25.07.2018
comment
Я обнаружил, что больше невозможно создавать библиотеки, для которых требуются другие библиотеки в ваших проектах, из-за ошибок корневого каталога машинописного текста. Однако можно просто добавить каталог исходного кода (projects/libraryName/src/public-api), который вы упомянули в своем ответе, к уже существующей записи dist/libraryName как вторая линия. Таким образом, я могу отлаживать и собирать все библиотеки. Протестировано с Angular 8.1.3 - person Tobias Reithmeier; 01.08.2019
comment
Добавляя к комментарию @comic-sans, поместите dist/... location перед проектами/... location, он будет использовать первый найденный. Это позволит собрать библиотеки, но отладка не будет работать после сборки библиотеки. Просто не забудьте удалить папку dist, если она существует, перед отладкой. Хотелось бы более плавного решения. Мне не удалось заставить исходную карту поставщика работать для отладки в среде IDE. - person reads0520; 20.11.2019
comment
Могу сказать, что в Angular 8 это не работает. Недостаточно горячей перезагрузки ваших библиотек. Я нашел это полезным: stackoverflow.com/questions/59356732/ - person Vallerious; 20.03.2020

arrow_upward
4
arrow_downward

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

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

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

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

--vendor-source-map был заменен на --sourceMap=true|false для ng serve:

  • ng serve --source-map=true

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

person Markus Pscheidt    schedule 22.11.2018

arrow_upward
3
arrow_downward

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

person Scott Grodberg    schedule 28.10.2018
comment
Я попробую это, если это сработает, это звучит идеально. - person JoAMoS; 28.10.2018
comment
эта опция устарела - person tbo47; 09.04.2019

arrow_upward
-4
arrow_downward

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

person Michael Bruyninckx    schedule 27.06.2018