http-server -p 8080无法加载Angular PWA应用，ng serve可正常运行

问题回顾 #

你按照Angular官网《Service Worker入门》的步骤尝试用http-server部署Angular 6 PWA应用，但启动服务后遇到两个问题：

• 访问localhost:8080时，显示的不是默认的"Welcome to your app"页面，而是一个带有pwaApp链接的简单目录索引页
• 点击链接跳转后页面空白，控制台出现资源加载错误

环境信息 #

• Angular CLI: 6.0.1
• Node: 8.9.4
• OS: linux x64
• Angular: 6.0.1

问题原因分析 #

从你的表现来看，核心问题出在资源路径不正确和构建/服务启动步骤不规范：

1. 未进入正确的构建输出目录启动服务：你大概率是在项目根目录直接运行http-server，而Angular生产构建的资源都在dist文件夹下，http-server找不到index.html就会显示目录索引页。
2. 可能未执行生产构建：Angular的Service Worker和PWA相关资源（如manifest.json、ngsw-worker.js）只有在--prod构建模式下才会生成，开发构建不会包含这些内容，同时生产构建会优化打包资源路径。
3. base href配置不匹配：如果你的应用部署路径和构建时指定的base-href不一致，会导致静态资源加载失败，进而出现空白页。

修复步骤 #

1. 确认PWA模块已正确集成

首先确保你已经完成了PWA的初始化步骤：

ng add @angular/pwa --project your-project-name

打开src/app/app.module.ts，确认已正确导入ServiceWorkerModule：

import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    // ...其他模块
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: environment.production,
      // 可选：延迟注册，提升首屏速度
      registrationStrategy: 'registerWhenStable:30000'
    })
  ]
})
export class AppModule { }

2. 执行生产构建

必须使用--prod参数构建，这会生成完整的PWA资源并优化路径：

ng build --prod

如果你的应用部署在子路径下（比如localhost:8080/pwaApp），需要指定base-href：

ng build --prod --base-href="/pwaApp/"

3. 进入构建输出目录启动http-server

构建完成后，切换到dist目录（Angular 6默认输出到dist/your-project-name）：

cd dist/your-project-name
# 如果你的angular.json配置输出目录为dist，直接cd dist即可

然后启动http-server：

http-server -p 8080

4. 验证修复效果

现在访问localhost:8080（如果指定了base-href则访问localhost:8080/pwaApp），应该能正常看到默认的Angular页面，同时控制台不会出现资源加载错误，Service Worker也会正常注册。

额外排查点 #

• 确保http-server是全局安装的：如果启动报错，执行npm install -g http-server重新安装
• 清理浏览器缓存：有时候旧的缓存会导致资源加载异常，可以打开开发者工具（F12），在Network面板勾选"Disable cache"后刷新页面

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