无法加载角度生成的网页(ng build --prod) [英] Can't load angular generated webpage (ng build --prod)

问题描述

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

我应该提到我的应用程序成功编译并运行 'http://本地主机: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_FAILEDindex.html:1

5) 从源null"访问file:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/main-es2015.69da1b25d5a7a648b825.js"的脚本已被 CORS 策略阻止:跨源请求仅支持协议方案: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

解决方案

问题是您试图在没有服务器为 Angular 生成的 js 包提供服务的情况下运行应用程序.Angular 会异步加载 js.

一个选项在编译目录上运行live-server

//如果你还没有安装 live-servernpm install -g live-server//在你的 dist 上运行 live-servercd <project-compile-dist-path>实时服务器//注意:如果你不想全局安装 live-server//可以使用 npxnpx live-server <path-to-directory>

<块引用>

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

After deploying my angular app by using 'ng build --prod' I tried to open index.html file and check my webapp. But it display nothing in chrome, firefox and edge web browsers. After I open console and checked whether is there are any errors, it will show me 6 error messages.

I should mention that my app successfully compiled and worked on 'http://localhost:4200/' . After I tried another angular app(new one), but it comes withe same kind of errors after build.

Errors:

1) Access to script at 'file:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/runtime-es2015.edb2fcf2778e7bf1d426.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.

2) GET file:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/runtime-es2015.edb2fcf2778e7bf1d426.js net::ERR_FAILED

3) Access to script at 'file:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/polyfills-es2015.2987770fde9daa1d8a2e.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. index.html:36

4) GET file:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/polyfills-es2015.2987770fde9daa1d8a2e.js net::ERR_FAILED index.html:1

5) Access to script at 'file:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/main-es2015.69da1b25d5a7a648b825.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. index.html:36

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

解决方案

The problem is you're trying to run the application without a server serving the js bundles generated by Angular. Angular will load the js asynchronously.

An option run live-server on the compiled directory

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

这篇关于无法加载角度生成的网页(ng build --prod)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！