Question

Angular8如何打包index.html似乎破坏了我的部署，似乎有change甚至不是bug。

dist文件夹中index.html底部的脚本不再具有类型=“ text / javascript”

function findDayBegninning(date:any){
    const ms = date.getTime();
    const msPerDay = 86400 * 1000;
    return  ms - (ms % msPerDay);
}

部署后，我在chrome和firefox中遇到错误，例如：

<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>

或

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

这可能会影响不同类型的Web服务器。

我正在将AppEngine与python运行时一起使用。我试图在app.yaml中设置MIME类型，例如：

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.

这没有用。要么方法错误，要么我的Yaml错误。

在构建之后，作为一个实验，我手动编辑了dist / index.html并将type =“ text / javascript”插入到文件底部的所有脚本中。可以，但是我正在寻找可行的解决方案。

Answer 1

在这种情况下：

Google AppEngine标准python环境
角度8
最近的Chrome版本

这个新的Angular版本8和Google AppEngine标准部署没有任何问题。

我在GAE中的处理程序如下：

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

Angular 8中的这一更改归功于新的差异加载功能。现在，ng build正在为每个JS包构建2个版本。旧的ES5语法和新的现代ES2015版本（JS模块）。

您可以在此处阅读更多详细信息： https://angular.io/guide/deployment#differential-loading

您可以通过在tsconfig.json中将目标设置回es5来退出此更改

也许这是第一个解决方法，这是了解实际问题的时间。

已更新

根据要求，这里是完整的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

Answer 2

我的技术堆栈有些不同（即，我没有使用Python），但这可能会有帮助：

在运行ng build --prod（应该运行AOT时）时，我一直在使用MEAN Stack应用程序（使用Angular 8 / Node v11.6.0）遇到相同的问题/浏览器错误。默认情况下是时间编译，但由于某种原因（我无法解释），它无法以Chrome + Firefox可以读取的方式进行编译）。访问Angular文档（https://angular.io/guide/aot-compiler）之后，我在运行节点服务器之前尝试运行ng build --aot而不是ng build --prod，问题就消失了。

希望这会有所帮助：-）

升级到Angular8后，AppEngine将使用错误的mime类型提供脚本

2 个答案: