Offline production build in Angular 9
Question
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
<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. But I now updated to angular 9 and after ng build --prod I got this 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
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.)" )
How to make angular 9 project to properly build for offline usage? 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.
2 answers
solution1
1 2020-04-29 23:36:45
在您的tsconfig您需要将目标更改为此"target": "es5",
solution2
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.