如何用http-server运行Angular PWA？访问出现404错误

问题重现 #

• 用ng new myProject --routing创建带路由的Angular 17项目
• 执行ng add @angular/pwa集成PWA功能
• 无修改执行ng build构建后，用http-server -p 8080 -c-1 -o dist/启动服务器
• 访问http://127.0.0.1:8080/dist/看到文件列表，进入myProject文件夹后出现多个404请求，页面空白

核心原因 #

Angular 16+（尤其是Angular 17）的默认构建输出结构调整了：构建产物不再直接放在dist/myProject根目录，而是存放在dist/myProject/browser子目录中。之前启动http-server时把dist/作为服务器根目录，导致Angular资源的引用路径和服务器实际文件路径不匹配，触发404。

正确操作步骤 #

1. 优先用生产环境构建（PWA功能在生产模式下才会完全生效）：

   ng build --configuration production
   

2. 启动http-server时，指定正确的产物根目录：

   http-server -p 8080 -c-1 -o dist/myProject/browser
   

   或者切换到目标目录后启动，更直观：

   cd dist/myProject/browser
   http-server -p 8080 -c-1 -o
   

PWA功能验证 #

启动后打开Chrome开发者工具的「Application」标签：

• 查看「Service Workers」，确认状态为activated且running
• 查看「Manifest」，确认能正常识别，可测试添加到桌面的功能

额外提示 #

• ng serve无法测试PWA：开发服务器默认不加载Service Worker，必须用静态文件服务器运行生产构建产物
• 若用Angular 16，构建产物路径是dist/myProject，启动命令改为http-server -p 8080 -c-1 -o dist/myProject
• -c-1参数强制禁用缓存，避免测试时加载旧资源，确保看到最新的PWA状态

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