无法加载生成的角度网页（ng build --prod）

Question

使用'ng build --prod部署了我的角度应用程序后，我试图打开index.html文件并检查我的webapp。但是它在chrome，firefox和Edge网络浏览器中什么也不显示。打开控制台并检查是否存在任何错误后，它将显示6条错误消息。

我应该提到我的应用已成功编译并在其中工作'http://localhost:4200/'。在我尝试了另一个有角度的应用程序（新应用程序）之后，但是在构建后出现了同样的错误。

错误：

1）通过CORS策略阻止了对来自源“空”的'file：/// D：/AngularTshirt/module01/moduleapp01/dist/moduleapp01/runtime-es2015.edb2fcf2778e7bf1d426.js'处脚本的访问：跨源请求仅支持协议方案：http，数据，chrome，chrome扩展名，https。

2）GET文件：/// D：/AngularTshirt/module01/moduleapp01/dist/moduleapp01/runtime-es2015.edb2fcf2778e7bf1d426.js net :: ERR_FAILED

3）通过CORS策略阻止了对来自“ null”的'file：/// D：/AngularTshirt/module01/moduleapp01/dist/moduleapp01/polyfills-es2015.2987770fde9daa1d8a2e.js'处脚本的访问：跨源请求仅支持以下协议方案：http，数据，chrome，chrome扩展名，https。index.html：36

4）GET文件：/// D：/AngularTshirt/module01/moduleapp01/dist/moduleapp01/polyfills-es2015.2987770fde9daa1d8a2e.js net :: ERR_FAILEDindex.html：1

5）通过CORS策略阻止了对来自'null'的'file：/// D：/AngularTshirt/module01/moduleapp01/dist/moduleapp01/main-es2015.69da1b25d5a7a648b825.js'处脚本的访问：跨源请求仅支持以下协议方案：http，数据，chrome，chrome扩展名，https。index.html：36

6）GET文件：/// D：/AngularTshirt/module01/moduleapp01/dist/moduleapp01/main-es2015.69da1b25d5a7a648b825.js net :: ERR_FAILED

Answer 1

问题是您试图在没有服务器服务Angular生成的js捆绑包的情况下运行该应用程序。 Angular将异步加载js。

已编译目录上的选项运行live-server

// Install live-server if you haven't
npm install -g live-server

// Run live-server on you dist
cd <project-compile-dist-path>
live-server

https://www.npmjs.com/package/live-server

Answer 2

您必须通过HTTP服务器提供项目的dist/moduleapp01文件夹。由于安全原因（尝试执行的操作），当从文件系统发出某些请求时，浏览器会自动阻止它们。您可以使用http-server（https://www.npmjs.com/package/http-server）。

从项目的根目录，您可以用http-server ./dist/moduleapp01 -p 4200启动服务器，然后在浏览器中的http://localhost:4200上打开它。