无法加载角度生成的网页(ng build --prod) [英] Can't load angular generated webpage (ng build --prod)
问题描述
使用' ng build --prod '部署我的角度应用程序后，我尝试打开index.html文件并检查我的webapp.但是它在chrome，firefox和Edge网络浏览器中什么也不显示.打开控制台并检查是否有错误后，它将显示6条错误消息.
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.
我应该提到我的应用已成功编译并可以在其上运行' http://localhost:4200/ ". 在我尝试了另一个有角度的应用程序(新应用程序)之后，但是在构建后出现了同样的错误.
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.
错误:
1)通过CORS策略阻止了对源'null'中'file:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/runtime-es2015.edb2fcf2778e7bf1d426.js'处脚本的访问:跨源请求仅支持以下协议方案:http，数据，chrome，chrome扩展名，https.
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)获取文件:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/runtime-es2015.edb2fcf2778e7bf1d426.js net :: ERR_FAILED
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，数据，chrome，chrome扩展名，https. index.html:36
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文件:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/polyfills-es2015.2987770fde9daa1d8a2e.js net :: ERR_FAILED index.html:1
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，数据，chrome，chrome扩展名，https. index.html:36
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)获取文件:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/main-es2015.69da1b25d5a7a648b825.js net :: ERR_FAILED
6) GET file:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/main-es2015.69da1b25d5a7a648b825.js net::ERR_FAILED
推荐答案
问题是您试图在没有服务器提供Angular生成的js包的服务器的情况下运行该应用程序. Angular将异步加载js.
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.
在已编译目录上运行live-server的选项
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>
这篇关于无法加载角度生成的网页(ng build --prod)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
