如何构建我的 Angular 8 应用程序，以便在浏览器中打开 index.html 时它可以工作？答案

【问题标题】：How do I build my angular 8 app so that it works when opening index.html in browser?如何构建我的 Angular 8 应用程序，以便在浏览器中打开 index.html 时它可以工作？
【发布时间】：2020-03-18 20:01:09
【问题描述】：

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

加载资源失败：net::ERR_FAILED

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

我尝试手动和通过命令更改 html 中的 href，并尝试了此 question 的多个答案，但没有任何效果。我还想提一下，构建的网站在带有 server-lite 的本地服务器中运行良好。

这是 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

欢迎任何帮助，谢谢。

【问题讨论】：

那是因为您正在通过file:// 协议访问文件。您最好使用 ng serve 简单地运行您的 Angular 应用程序。

标签： angular angular-cli github-pages

【解决方案1】：

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

或者正常的方式

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查看结果。

【讨论】：