如何强制Angular运行时从/dist文件夹读取文件（解决webpack内存读取问题）

方案一：通过Angular CLI参数直接指定 #

1. 先执行构建命令生成/dist目录文件，加上--watch可实时同步文件修改：

   ng build --watch
   

2. 启动开发服务器时，指定从构建产物目录提供资源：

   ng serve --serve-path / --public-host localhost:4200 --disable-host-check
   

   • --serve-path / 将服务器根路径映射到构建产物目录
   • --public-host 确保页面资源路径解析正确
   • --disable-host-check 避免跨域或主机校验类问题

方案二：修改angular.json配置 #

编辑项目根目录的angular.json，调整architect.serve的配置，让开发服务器直接指向/dist目录：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "你的项目名称:build",
    "staticContent": [
      {
        "path": "dist/你的项目名称"
      }
    ]
  }
}

保存配置后直接运行ng serve，服务器会优先从/dist目录读取文件。

方案三：用第三方静态服务器替代Angular开发服务器 #

如果CLI配置方式不适用，可直接用静态服务器托管/dist目录：

1. 安装轻量静态服务器（以http-server为例）：

   npm install -g http-server
   

2. 构建项目并启动服务器：

   ng build --watch
   cd dist/你的项目名称
   http-server -p 4200 -c-1
   

   -c-1 参数禁用缓存，确保能即时看到nyc修改后的文件。

注意事项 #

• 确保nyc的修改脚本在ng build完成后执行，或配合--watch在每次构建后自动触发修改操作。
• 开发构建模式下注意禁用浏览器缓存，避免加载旧的未修改文件。

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