Приложение Angular не уродуется после сборки с флагом "prod"

#angular #amazon-web-services #npm #web-applications #aws-amplify

#angular #amazon-web-services #npm #веб-приложения #aws-amplify

Вопрос:

Я использую Angular 7. Мои настройки для production сборки содержат ключи optimization=true и buildOptimizer=true . Я включу фрагмент полной production конфигурационной части моего angular.json файла внизу.

Я запускаю автоматическую сборку на AWS Amplify. Я также включу конфигурацию сборки внизу, но по сути она выполняется npm run build --prod .

Проблема в том, что после успешной сборки я могу перейти к своему веб-приложению и по-прежнему видеть весь исходный код без искажений (перейдя в консоль разработчика Chrome и просмотрев содержимое webpack каталога). Не могу точно определить, что я сделал не так.

angular.json :

 "production": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ],
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "extractCss": true,
  "namedChunks": false,
  "aot": true,
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": true,
  "budgets": [
    {
      "type": "initial",
      "maximumWarning": "2mb",
      "maximumError": "5mb"
    }
  ],
  "serviceWorker": true
}

Сценарий сборки:

 version: 0.1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build --prod
  artifacts:
    baseDirectory: dist/myprojectname
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Ответ №1:

Почему не использовать Angular-CLI?.

Просто команда

ng build —prod

Я думаю, что ваша ‘npm run build —prod’ — это пользовательская команда. Итак, флаг prod не определен. не так ли?

1. Похоже, это и есть ответ. Действительно, «build» — это пользовательская команда, и флаг «—prod», определенный выше, до нее не дошел. Странно то, что оно работало на моем локальном компьютере (Windows PowerShell), но не работало на сервере Linux. Поскольку на этом сервере у меня не установлен глобальный angular CLI, в итоге я добавил новую команду, которая выглядела как «build-prod»: «ng build —prod». Таким образом, я мог запустить «npm run build-prod» и не увидел исходных карт webpack.

2. Я рад быть полезным. 🙂

Ответ №2:

Если вы используете webpack, попробуйте опцию devtool devtool: "hidden-source-map" в качестве обходного пути.