Angular 9 中的离线生产构建
[英]Offline production build in Angular 9
问题描述
In angular 6, When I executed ng build --prod I got a bunch of files in my dist project folder and index.html that had
在 angular 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>
So I opened index.html and my app worked offline just fine.所以我打开 index.html 并且我的应用程序离线工作得很好。 But I now updated to angular 9 and after ng build --prod I got this index.html但是我现在更新到 angular 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 tags have now this type="module" and when I'm trying to open index.html the browser throws an error脚本标签现在有这个 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.
When I change type="module" to type="text/javascript" my app kinda works(it works in chrome but firefox throws 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.)" )当我将 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.)" ）
How to make angular 9 project to properly build for offline usage?如何使 angular 9 项目正确构建以供离线使用？ Also, another related to this question: What should I do so that after I run ng build --prod angular doesn't dump every file in the main folder of the project but only index.html and puts the rest of the files into some other folder in this directory(for example "data"), so that the main folder would look user-friendly.此外，另一个与此问题相关的问题是：我应该怎么做，以便在我运行ng build --prod angular 后不会转储项目主文件夹中的每个文件，而只会转储 index.html 并将其余文件放入一些此目录中的其他文件夹（例如“data”），以便主文件夹看起来对用户友好。
2 个解决方案
解决方案1
1 2020-04-29 23:36:45
在您的tsconfig您需要将目标更改为此"target": "es5",
解决方案2
0 2020-02-14 03:19:59
I found out how to disable modular build.我发现了如何禁用模块化构建。 You need to disable differential loading.您需要禁用差异加载。 In my case, because I target only Chrome I edited "browserslist" file at the root folder of my project to have this content: last 2 Chrome versions but if it's not suited for you here is Browserslist config就我而言，因为我只针对 Chrome，所以我编辑了项目根文件夹中的“browserslist”文件以包含以下内容： last 2 Chrome versions但如果它不适合您，这里是Browserslist 配置
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.