AngularJS网页本地文件系统加载异常求助：无需服务器部署

核心原因 #

Angular默认构建产物使用绝对路径（比如/main.js），而本地文件系统通过file://协议访问时，绝对路径会指向系统根目录而非项目解压后的文件夹，导致资源加载失败。

具体解决步骤 #

1. 修改构建配置为相对路径 #

打开项目根目录的angular.json文件，找到对应项目的architect -> build -> options节点，添加或修改以下配置：

"options": {
  "baseHref": "./",
  "deployUrl": "./",
  // 保留原有其他配置
}

• baseHref：将应用基准路径设置为当前目录
• deployUrl：指定所有资源文件的加载路径为当前目录

2. 重新构建项目 #

执行构建命令（生产环境加--prod参数，开发环境可省略）：

ng build --prod

构建完成后，dist文件夹内的产物即为可本地直接打开的版本。

3. 修复路由问题（若使用Angular路由） #

如果项目用到路由，默认的HTML5模式会在file://协议下触发404，需切换为哈希模式：
打开app-routing.module.ts，修改路由配置：

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

哈希模式会在URL中添加#，避免本地文件系统下的路由解析错误。

4. 验证可用性 #

将dist文件夹打包成.zip，解压后双击index.html，在Chrome等浏览器中确认所有资源加载正常、功能可正常使用。

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