Angular 5.2集成ServiceWorker遭遇MIME类型错误求助

嘿，我来帮你搞定这个MIME类型报错的问题！结合你已经完成的操作（配置ngsw-config.json、开启Angular CLI的serviceWorker、安装依赖、注册模块），这个错误一般是几个细节没处理好，我们一步步排查：

1. 先调整测试姿势：本地开发别直接用ng serve测Service Worker #

Angular CLI 1.7.x的ng serve对Service Worker支持有限，就算配置正确，本地开发服务器也可能无法正确设置ngsw-worker.js的MIME类型，甚至无法加载它。正确的测试方式是先构建生产包，再用静态服务器运行：

• 执行生产构建：ng build --prod
• 安装简单的静态服务器：npm install -g http-server
• 进入生成的dist目录：cd dist
• 启动服务器（禁用缓存避免干扰）：http-server -p 4200 -c-1

2. 检查服务器的MIME类型配置 #

如果是部署到生产服务器（比如Nginx、Apache），一定要确保服务器把ngsw-worker.js识别为application/javascript类型：

• Nginx配置示例（添加到对应server块中）：

  types {
      application/javascript js;
  }
  

• Apache配置示例（添加到.htaccess或主配置文件）：

  AddType application/javascript .js
  

如果服务器返回的是text/html或其他类型，浏览器就会抛出MIME类型不匹配的错误。

3. 核对ngsw-config.json的正确性 #

这个配置文件如果有语法错误或者路径问题，会导致CLI生成的ngsw-worker.js异常，间接引发错误：

• 确保文件放在项目根目录（和angular-cli.json同级）
• 检查基本结构是否符合Angular 5.2的要求，示例如下：

  {
    "index": "/index.html",
    "assetGroups": [
      {
        "name": "app",
        "installMode": "prefetch",
        "resources": {
          "files": ["/favicon.ico", "/index.html"],
          "versionedFiles": ["/*.bundle.css", "/*.bundle.js", "/*.chunk.js"]
        }
      },
      {
        "name": "assets",
        "installMode": "lazy",
        "updateMode": "prefetch",
        "resources": {
          "files": ["/assets/**"]
        }
      }
    ]
  }
  

• 执行ng build --prod时，留意终端有没有报错，配置错误会在这里直接提示。

4. 确认ServiceWorkerModule的注册路径 #

如果你的应用部署在子路径下（比如https://your-domain.com/my-app/），注册路径不能直接写'/ngsw-worker.js'，得改成对应子路径：

ServiceWorkerModule.register('/my-app/ngsw-worker.js', { enabled: environment.production })

路径不对的话，浏览器会在根目录找不到文件，返回404页面（MIME类型是text/html），自然就触发MIME错误了。

5. 确保依赖版本完全匹配 #

你安装的@angular/service-worker@5.2.9要和你的Angular核心版本（5.2.x）完全一致，版本不匹配可能导致生成的worker文件有问题。可以用下面的命令统一版本（把5.2.x换成你实际的核心版本号）：

npm install @angular/service-worker@5.2.x --save-dev

按照上面的步骤排查，应该能解决这个MIME类型错误啦！

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