Angular服务工作者 + MIME类型错误

Question

我正在尝试将服务工作者添加到我们现有的Angular（5.2，CLI 1.7.1）应用程序中。我已经按照预期进行了所有操作：

1. 我创建了ngsw-config.json
2. 我运行ng set apps.0.serviceWorker=true命令，以便在angular-cli.json中有"serviceWorker": true,。
3. 我已安装"@angular/service-worker": "5.2.9"

4. 我向app.module.ts中添加了：

import { ServiceWorkerModule } from '@angular/service-worker';
imports: [
    ...
    ServiceWorkerModule.register('/ngsw-worker.js', 
        { enabled: environment.production }),
]

我甚至尝试将这段代码（在某个地方找到的解决方案）添加到main.ts中

platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
    if ('serviceWorker' in navigator && environment.production) {
        navigator.serviceWorker.register('/ngsw-worker.js');
    }
}).catch(err => console.log(err));

但是我遇到了这个错误：

未捕获的（在 promise 中）DOMException：注册 Service Worker 失败：脚本具有不受支持的 MIME 类型（'text/html'）。

ERROR Error：未捕获的（在 promise 中）：SecurityError：注册 Service Worker 失败：脚本具有不受支持的 MIME 类型（'text/html'）。在 resolvePromise (polyfills.3e9ea997ddae46e16c09.bundle.js:1)

在我的个人小应用程序中，我做了同样的事情，没有任何错误。我们遇到这个错误的应用程序非常庞大，有很多第三方库，我读过可能会出现问题。

请问您能帮助我吗？

此外，我正在检查自己的应用程序以查找可能的差异，但我查看了开发工具中的网络选项卡，注意到应该由服务工作者缓存的文件始终被加载。这是正确的行为吗？

- Laker

Answer 1

这可能是由于缺少ngsw-worker.js文件引起的。

很可能您正在使用HTML5 pushState风格的URL，并且已经配置了您的Web服务器，对于任何在服务器上不存在的文件或文件夹，都会返回您的索引页面（通常为 index.html）。如果ngsw-worker.js在物理上不存在，则Web服务器将重定向请求到ngsw-worker.js以便返回index.html（因此MIME类型为"text/html"）。

当运行时，ngsw-worker.js文件通常会被复制到您的dist文件夹中。

ng build --prod

- artfulmethod

---

非常感谢。我会尝试一下，如果有效的话我会标记你 :) 如果可以的话，请问在网络选项卡（开发者工具）中它应该是什么样子才算正常工作？是否应该下载“缓存”的文件？还是应该是即时的？ - Laker

你会看到一个200 OK。如果文件之前已经成功加载过，则该文件可能从缓存中提供服务。有关该特定文件的缓存更多信息，请参见https://dev59.com/kFkT5IYBdhLWcg3wRNYR#38854905。 - artfulmethod

ng build --prod可以解决问题。如何在使用development environment.ts的情况下运行ng build --prod？ - Jek

对于 Angular 5 及更早的版本，在 angular-cli.json 文件的“production”配置中的“environments”属性中添加一个条目。然后，运行“ng build --prod --env=foo”。对于 Angular 6+，要么从 angular.json 文件的 “production” 配置中的“fileReplacements”属性中删除 environment.ts 条目，要么复制该配置并根据需要进行修改。然后，运行“ng run yourproject:build:foo”。 - artfulmethod

或者您可以在配置文件（angular.json）中启用“serviceWorker”：true。 - msmaromi

谢谢！这对我有用，Angular 8中的构建命令中移除了--base-href。 - Prem G

Answer 2

在尝试了许多不同的Angular8事物后，我最终将angular-devkit从0.800.2升级到了0.803.2

npm install @angular-devkit/build-angular@latest

然后我遇到了一个错误：

Error: Expected to find an ngsw-config.json configuration file in the [PROJECT] folder. Either provide one or disable Service Worker in your angular.json configuration file.

我通过更改

"ngswConfigPath": "ngsw-config.json" 为 "ngswConfigPath": "src/ngsw-config.json"

然后它终于起作用了。

- C13