После обновления до Angular8 AppEngine обслуживает скрипты с неверным MIME-типом. - PullRequest
Новая
       37

После обновления до Angular8 AppEngine обслуживает скрипты с неверным MIME-типом.

1 голос
/ 22 июня 2019

Похоже, что изменится , если не ошибка на то, как Angular8 упаковывает index.html, который нарушает мое развертывание.

Скрипты в нижней части index.html в папке dist больше не имеют type = "text / javascript" 

<script src="runtime-es2015.b1e01c6054a9feffbeda.js" type="module"></script>
<script src="polyfills-es2015.dd0ef0c762416a11ccfe.js" type="module"></script>
<script src="runtime-es5.b1e01c6054a9feffbeda.js" nomodule></script><script src="polyfills-es5.ad2e20378bba1e661425.js" nomodule></script>
<script src="scripts.03e042f1f102bf0e2ed8.js"></script><script src="main-es2015.59f62c10fb8246590dad.js" type="module"></script><script src="main-es5.d5d8d375e147ae1da6f0.js" nomodule></script></body>

После развертывания я получаю ошибки в chrome и firefox, например: 

Loading module from “https://yarrascrape.appspot.com/runtime-es2015.b1e01c6054a9feffbeda.js” was blocked because of a disallowed MIME type (“text/plain”).

или 

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

Это может повлиять на различные типы веб-серверов.

Я использую AppEngine с Python Runtime.Я попытался установить тип MIME в app.yaml с такими вариациями, как: 

- url: /(.*\.(js))$
  secure: always
  static_files: \1
  upload: (.*)
  http_headers:
    content_type: text/javascript

- url: /(.*)
  secure: always
  static_files: \1
  upload: (.*)
  http_headers:
    content_type: text/javascript

Это не сработало.Либо неправильный подход, либо мой yaml неправильный.

После сборки, в качестве эксперимента, я вручную отредактировал dist / index.html и вставил type = "text / javascript" во все скрипты внизу.файла.Это работает, но я ищу жизнеспособное решение.

1 Ответ

2 голосов
/ 01 июля 2019

В этом контексте:

  • стандартная среда Python Google AppEngine
  • Угловой 8
  • последняя версия Chrome

У меня нет проблем с новой версией Angular 8 и стандартным развертыванием Google AppEngine.

Мой обработчик в GAE выглядит так: 

handlers:
- url: /(.+\.js)
  static_files: app/\1
  upload: app/(.+\.js)

Это изменение в Angular 8 связано с новой функцией дифференциальная нагрузка . Теперь ng build создает 2 версии каждого пакета JS. Старый синтаксис ES5 и новая современная версия ES2015 (модуль JS).

Подробнее вы можете прочитать здесь: https://angular.io/guide/deployment#differential-loading

Вы можете отказаться от этого изменения, установив в качестве значения цели es5 в вашем файле tsconfig.json

Возможно, это может быть первый вариант обходного пути, время, чтобы понять реальную проблему.

Обновлено

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

runtime: python27
threadsafe: true
api_version: 1

handlers:
- url: /(.+\.js)
  static_files: app/\1
  upload: app/(.+\.js)

- url: /(.+\.css)
  static_files: app/\1
  upload: app/(.+\.css)

- url: /(.+\.png)
  static_files: app/\1
  upload: app/(.+\.png)

- url: /(.+\.jpg)
  static_files: app/\1
  upload: app/(.+\.jpg)

- url: /(.+\.svg)
  static_files: app/\1
  upload: app/(.+\.svg)

- url: /favicon.ico
  static_files: app/favicon.ico
  upload: app/favicon.ico

- url: /(.+\.json)
  static_files: app/\1
  upload: app/(.+\.json)

- url: /(.+)
  static_files: app/index.html
  upload: app/index.html

- url: /
  static_files: app/index.html
  upload: app/index.html
...