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

【问题标题】：Can't load angular generated webpage (ng build --prod)无法加载角度生成的网页（ng build --prod）
【发布时间】：2020-03-11 16:07:15
【问题描述】：

使用“ng build --prod”部署我的 Angular 应用程序后，我尝试打开 index.html 文件并检查我的 webapp。但它在 chrome、firefox 和 edge 网络浏览器中什么也不显示。在我打开控制台并检查是否有任何错误后，它会显示 6 条错误消息。

我应该提到我的应用程序已成功编译并在 'http://localhost:4200/' 上运行。在我尝试了另一个 Angular 应用程序（新的）之后，但它在构建后出现了同样的错误。

错误：

1) CORS 策略已阻止从源“null”访问“file:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/runtime-es2015.edb2fcf2778e7bf1d426.js”处的脚本：跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。

2) GET file:///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、data、chrome、chrome-extension、https。 index.html:36

4) GET file:///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、data、chrome、chrome-extension、https。 index.html:36

6) GET file:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/main-es2015.69da1b25d5a7a648b825.js net::ERR_FAILED

【问题讨论】：

没有问题。如果您使用的是 VS Code，请使用实时服务器
阅读有关 CORS 的更多信息，以更好地了解该政策
您需要服务该应用程序。这正是内置 server 在 localhost:4200 上所做的。单独打开 HTML 文件是行不通的。

标签： angular google-chrome angular8 webdeploy

【解决方案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

// Note: if you don't want to install live-server globally you
// can use npx
npx live-server <path-to-directory>

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

【讨论】：

【解决方案2】：

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

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

【讨论】：