angular - 无法加载 Angular 生成的网页(ng build --prod)

Question

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

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

错误:

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

2) 获取文件:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/runtime-es2015.edb2fcf2778e7bf1d426.js net::ERR_FAILED

3) 从源“null”访问位于“file:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/polyfills-es2015.2987770fde9daa1d8a2e.js”的脚本已被 CORS 策略阻止:跨源请求仅支持协议(protocol)方案:http、data、chrome、chrome-extension、https。index.html:36

4) 获取文件:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/polyfills-es2015.2987770fde9daa1d8a2e.js net::ERR_FAILEDindex.html:1

5) 从源“null”访问位于“file:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/main-es2015.69da1b25d5a7a648b825.js”的脚本已被 CORS 策略阻止:跨源请求仅支持协议(protocol)方案:http、data、chrome、chrome-extension、https。index.html:36

6) 获取文件:///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

// 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