Question

在角度6中，当我执行 ng build --prod 时，我在dist项目文件夹和index.html中有一堆文件

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My project</title>
  <base href="./">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico"> 
<link rel="stylesheet" href="styles.5510f6725adb16e901a5.css"></head>
<body>
  <app-root></app-root>
<script type="text/javascript" src="runtime.a66f828dca56eeb90e02.js"></script><script type="text/javascript" src="polyfills.a19b2f1d90e9baecaab8.js"></script><script type="text/javascript" src="main.07ef95a019972121cea2.js"></script></body>
</html>

所以我打开了index.html，我的应用程序可以离线运行。但是我现在更新到角度9，在 ng build --prod 之后，我得到了这个index.html

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My project</title>
  <base href="./">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico"> 
<link rel="stylesheet" href="styles.387b68bbf04bb28b1761.css"></head>
<body>
  <app-root></app-root>
<script src="runtime-es2015.0811dcefd377500b5b1a.js" type="module"></script><script src="runtime-es5.0811dcefd377500b5b1a.js" nomodule defer></script><script src="polyfills-es5.61df131d802a89ddffe2.js" nomodule defer></script><script src="polyfills-es2015.77d2d1471503030c423e.js" type="module"></script><script src="main-es2015.e2388ceeb931e40e846b.js" type="module"></script><script src="main-es5.e2388ceeb931e40e846b.js" nomodule defer></script></body>
</html>

script标记现在具有这种type =“ module”，并且当我尝试打开index.html时，浏览器抛出错误

Access to script at 'file:[path_to_my_app]/runtime-es2015.0811dcefd377500b5b1a.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
runtime-es2015.0811dcefd377500b5b1a.js:1 Failed to load resource: net::ERR_FAILED
index.html:1 Access to script at 'file:[path_to_my_app]/polyfills-es2015.77d2d1471503030c423e.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
polyfills-es2015.77d2d1471503030c423e.js:1 Failed to load resource: net::ERR_FAILED
index.html:1 Access to script at 'file:[path_to_my_app]/main-es2015.e2388ceeb931e40e846b.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

当我将type =“ module”更改为type =“ text / javascript”时，我的应用程序可以正常工作（它可以在chrome中运行，但是Firefox会抛出Error: "Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten. Most likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do so before loading zone.js.)"）

如何使angular 9项目正确构建以供脱机使用？另外，另一个与此问题相关的问题：我应该怎么做，以便在运行 ng build --prod 后，angular不会转储项目主文件夹中的每个文件，而只会转储index.html并放入将其余文件放到该目录下的其他文件夹中（例如“数据”），以便主文件夹看起来易于使用。

Answer 1

在您的tsconfig中，您需要为此"target": "es5",更改目标

Answer 2

我发现了如何禁用模块化构建。您需要禁用差异加载。就我而言，因为我只定位了Chrome，所以我在项目的根文件夹中编辑了“ browserslist”文件，使其具有以下内容：last 2 Chrome versions，但如果不适合您，则为Browserslist config

Angular 9中的离线生产构建

2 个答案: