Настройка исходных карт с помощью Angular CLI

Webpack предоставляет большой контроль над генерацией исходных карт.

Конечно, компромисс при использовании Angular CLI заключается в том, что система сборки скрыта от нас.

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

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

С другой стороны, мы немного теряем контроль над сборкой.

К счастью, интерфейс командной строки сильно изменился и предоставляет нам средства для настройки многих вещей.

Недавно я хотел адаптировать генерацию исходных карт для своего приложения Angular, но не смог найти много информации в документации по интерфейсу командной строки.

Вы можете настроить создание исходных карт для различных целей (например, для обслуживания, производства и т. Д.) Через файл angular.json:

...
"architect": {
  ...
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "web:build",
      "sourceMap": {
        "scripts": true,
        "styles": true,
        "vendor": true
      }
    },
   ...
...

Как вы можете видеть выше, мы можем включать / отключать исходные карты для скриптов, стилей и кода поставщика.

В статье Минко Гечева содержится более подробная информация об этом: https://blog.mgechev.com/2019/02/06/5-angular-cli-features#hidden-source-maps

Также ознакомьтесь со следующей статьей об Angular in Depth, в которой подробно рассказывается о том, как использовать исходные карты для устранения неполадок в производственных приложениях: https://blog.angularindepth.com/debug-angular-apps-in-production-without- раскрытие-исходные-карты-ab4a235edd85