如何从Angular项目导出可离线运行的独立HTML/CSS/JavaScript文件

离线打开空白的核心原因有三个：

1. 默认base href为/，file协议下无法正确定位静态资源
2. 默认使用HTML5路由模式（无哈希），本地路径无法匹配路由规则
3. 部分浏览器对file协议下的ES模块导入、本地文件请求有跨域限制

操作步骤 #

1. 修改基础路径配置 #

两种修改方式二选一即可：

• 直接修改项目根目录src/index.html中的base标签：将<base href="/">改为<base href="./">
• 构建时添加参数：执行构建命令时增加--base-href ./，完整生产构建命令为：

  ng build --base-href ./
  

2. 调整路由为哈希模式 #

如果项目使用了Angular路由，需要将默认的HTML5路径模式改为哈希模式，避免本地路径匹配失败：

• 若为NgModule架构：修改app-routing.module.ts中的路由注册逻辑

  RouterModule.forRoot(routes, { useHash: true })
  

• 若为Standalone架构：修改app.config.ts中的路由提供逻辑

  provideRouter(routes, withHashLocation())
  

3. 修正所有资源引用路径 #

检查所有代码中对assets目录的引用，不要使用以/开头的绝对路径：

• 正确写法：assets/xxx.json
• 错误写法：/assets/xxx.json

4. 处理浏览器file协议限制 #

部分Chrome/Edge版本会默认禁止file协议下的本地文件请求和ES模块导入，可通过以下方式解决：

• 右键点击浏览器快捷方式，选择「属性」，在「目标」输入框的末尾追加 --allow-file-access-from-files，保存后用这个快捷方式打开浏览器再访问index.html

完成上述配置后重新执行生产构建，直接双击dist目录下的index.html即可正常离线运行，无需依赖应用服务器。

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