无法加载角度生成的网页（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_FAILED index.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上打开它。