如何构建我的 angular 8 应用程序，使其在浏览器中打开索引.html时正常工作?

Question

我刚刚完成了一个角度8应用程序的工作，我正在尝试将其托管在github页面上。我的问题是，当我尝试通过ng build --prod构建应用程序并在浏览器中打开 dist 文件夹的索引.html时。它只是读取该文件的内容并抛出一堆：

无法加载资源：净值：：ERR_FAILED

CORS 策略阻止了从源"null"访问"file:///D:/weather/Wapp/dist/Wapp/runtime-es2015.edb2fcf2778e7bf1d426.js"处的脚本：仅协议方案支持跨源请求：http、data、chrome、chrome-extension、https。

我尝试手动和通过命令更改 html 中的 href，并尝试了这个问题的多个答案，但没有任何效果。我还想提一下，构建的网站在具有服务器精简版的本地服务器中运行良好。

这是 dist 文件夹的结构：

D:.
└───Wapp
│   3rdpartylicenses.txt
│   favicon.ico
│   index.html
│   main-es2015.3597f5e65f4450662a55.js
│   main-es5.3597f5e65f4450662a55.js
│   polyfills-es2015.2987770fde9daa1d8a2e.js
│   polyfills-es5.6696c533341b95a3d617.js
│   runtime-es2015.edb2fcf2778e7bf1d426.js
│   runtime-es5.edb2fcf2778e7bf1d426.js
│   styles.44d5eaa2a1e46e8873ec.css
│
└───assets
rain.svg
wi-sandstorm.svg

欢迎任何帮助，谢谢。

Answer 1

基本上，Angular 2+ 不是为在没有 Web 服务器的情况下在文件系统上工作的。 如果你真的需要从文件系统中提供一个角度2+应用程序，我会认为电子是一个更好的解决方案。否则，您可以使用lite-server非常轻量级的开发 Web 服务器。

或正常方式

ng serve

注意：但是，有一个小技巧在大多数情况下都有效(不推荐(：

没有服务器的解决方案：

第一步：

index.html变化 ：

删除<base href="/">

第二步：

app.module.ts变化 ：

import { CommonModule, APP_BASE_HREF, LocationStrategy, HashLocationStrategy} from '@angular/common';
@NgModule({
providers: [
{ provide: APP_BASE_HREF, useValue: '/' },
{ provide: LocationStrategy, useClass: HashLocationStrategy }
]
})

第三步：

运行命令

ng build

或

ng build -prod

双击dist/index.html以查看结果。