如何构建我的angular 8应用程序，以便在浏览器中打开index.html时可以使用？

2024-05-20 • 问答

我刚刚完成了一个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，数据，chrome，chrome扩展名，https。

我尝试手动和通过命令更改html中的href，并尝试对此question进行多个回答，但没有任何效果。我还想提及一下，该构建的网站在具有server-lite的localserver中可以正常工作。 / p>

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

欢迎您的帮助，谢谢。

Basically Angular 2+不能在没有Web服务器的情况下使用文件系统。如果您确实需要使用文件系统中的Angular 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以查看结果。

如何构建我的angular 8应用程序，以便在浏览器中打开index.html时可以使用？

weichaochenweichao 回答：如何构建我的angular 8应用程序，以便在浏览器中打开index.html时可以使用？

大家都在问