angular - 无法加载角度生成的网页(ng build --prod)
问题描述
使用“ ng build --prod ”部署我的 Angular 应用程序后,我尝试打开 index.html 文件并检查我的 webapp。但它在 chrome、firefox 和 edge 网络浏览器中什么也不显示。在我打开控制台并检查是否有任何错误后,它会显示 6 条错误消息。
我应该提到我的应用程序成功编译并在“ http://localhost:4200/ ”上运行。在我尝试了另一个角度应用程序(新的)之后,但它在构建后出现了同样的错误。
错误:
1) CORS 策略已阻止从源“null”访问“file:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/runtime-es2015.edb2fcf2778e7bf1d426.js”处的脚本:跨源请求仅支持协议方案:http、data、chrome、chrome-extension、https。
2) 获取文件:///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。索引.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。索引.html:36
6) 获取文件:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/main-es2015.69da1b25d5a7a648b825.js net::ERR_FAILED
解决方案
问题是您试图在没有服务器为 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>
推荐阅读
- git - git-log:具有拓扑排序的合并提交的祖先分支的输出顺序
- swift - 如何在视图中使用 @Environment(\.calendar) 来初始化 @State 变量?
- html - 殡仪馆自动登录/表单字段自动填写
- reactjs - 如何将组件的 ref 降低 3 个级别?
- javascript - 道具在正常的 javascript 函数中不起作用。无法读取未定义的属性“道具”
- python - 在python中连接具有可变长度的列表列表
- c# - 使用 Newtonsoft.Json 进行枚举反序列化
- function - OntTriggerEnter2D 中的触发器问题统一
- c# - 在编译时替换 const 值
- arrays - 如何在 MongoDB 聚合中替换数组的值?