Angular：无需HTTP服务器直接打开dist/index.html加载报错求助

这个问题我之前帮不少开发者解决过——核心原因是Angular默认构建用了绝对路径，而file://协议下的绝对路径会指向本地文件系统的根目录，不是你的dist文件夹，所以找不到那些bundle文件。下面给你两种直接有效的解决办法：

1. 构建时指定相对路径 #

最简单的方式是在构建命令里加上--base-href参数，强制生成相对路径的资源引用：

• 开发环境构建：

  ng build --base-href ./
  

• 生产环境构建（带压缩优化）：

  ng build --prod --base-href ./
  

执行完这个命令后，打开dist/index.html看看，你会发现所有bundle文件的引用路径都变成了./inline.xxx.bundle.js这种相对路径，用浏览器直接打开index.html就能正常加载资源了。

2. 永久修改项目配置（一劳永逸） #

如果你不想每次构建都加参数，可以修改项目的angular.json配置文件，默认启用相对路径：
找到projects下你的项目名称，然后定位到architect -> build -> options，添加"baseHref": "./"配置，比如：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "baseHref": "./",
          // 其他原有配置...
        }
      }
    }
  }
}

之后直接执行ng build或者ng build --prod，生成的dist文件就自动用相对路径了。

额外注意：路由跳转问题 #

如果你的项目用到了Angular路由，直接用file://打开可能还会遇到路由跳转失效的问题——因为file://协议不支持HTML5的pushState路由模式。这时候需要切换到Hash路由模式：
在app.module.ts里做如下修改：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// 导入这两个类
import { HashLocationStrategy, LocationStrategy } from '@angular/common';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  // 添加这个provider配置
  providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }],
  bootstrap: [AppComponent]
})
export class AppModule { }

这样路由就会变成file:///xxx/dist/#/home这种带#的格式，在file://协议下也能正常跳转。

内容的提问来源于stack exchange，提问作者maroodb