Angular Service Worker: обновление развертываемого приложения выдает ошибку 504

  • Я создаю свой проект angular 8, используя ng build --prod

  • Обслуживайте его из папки /dist с помощью http-сервера (и в конечном итоге остановите его, и приложение по-прежнему будет работать, обслуживаясь через сервис-воркер)

  • проект регистрирует своего сервис-воркера

  • Я могу перемещаться по маршрутам, которые я предварительно выбрал и загрузил из кусков

  • Обновляю маршруты, работает как положено.

  • Однако когда я делаю то же самое с решением, которое было развернуто на сервере ( IIS), оно выдает ошибку 504, т.е. эта страница не работает ______ потребовалось слишком много времени, чтобы ответить. ОШИБКА HTTP 504

** - хотя базовый маршрут работает (даже при обновлении), но дочерний маршрут не работает (может перемещаться, но при перезагрузке выдает 504), а на вкладке сетей я вижу статус сбоя **

Кроме того, базовый href для нашего приложения настраивается в зависимости от различных сред, которые мы используем. Несмотря на то, что мы упоминаем область как текущий базовый href, а начальный URL как '/index.html' OR './' OR '/', проблема, похоже, сохраняется.

Это поведение IIS, или файл manifest.json кажется виноватым, или что-то еще, что мне нужно настроить для работы в этой настройке?

Источник

1 ответ

У меня была такая же проблема некоторое время назад , и я смог решить ее для меня. С тех пор он работает нормально, поэтому я решил поделиться им и здесь. Вот мой ответ на мой пост:

Так что, видимо , моя проблема не имеет ничего общего с моей конфигурацией IIS. Я до сих пор не могу объяснить, почему он работал на http-сервере, но теперь он работает и на IIS.

После долгих исследований и безуспешных экспериментов я попытался пронаблюдать, что именно делает ngsw-worker.js, что приводит к этой ошибке. Поставив несколько точек останова и найдя новые ключевые слова для поиска, я наткнулся на эту проблему GitHub , которая привела меня к этой широко обсуждаемой проблеме . В одном из своих комментариев пользователь jackkoppa упомянул свой вопрос StackOverflow , в котором он нашел обходной путь для решения такой проблемы.

По сути, я просто добавил его скрипт в наш проект и добавил команду для него в наш project.json.

Вот шаги, которые он описывает:

Чтобы использовать обходной путь: (Angular 5, протестировано с Angular 5.2.1)

  1. npm install replace-in-file --save-dev
  2. Включите этот скрипт в свое приложение, например, в build/fix-sw.js
  3. В твоей package.json:
      "scripts": {
    ...
    "sw-build": "ng build --prod && node build/fix-sw",   
    "sw-build-live": ng build --prod --base-href https://your-url.com/ && node build/fix-sw"
    ...
}
  1. Для локального запуска
      npm run sw-build
cd dist
http-server -p 8080
  1. И чтобы подготовить сборку для вашего активного URL-адреса, перед отправкой на сервер (например, с помощью angular-cli-ghpages) запустите npm .
      sw-build-live

После добавления скрипта мое приложение Angular, наконец, ведет себя так, как задумано.

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

Источник
Другие вопросы по тегам