Angular ServiceWorkers + MIME 类型错误答案

【问题标题】：Angular ServiceWorkers + MIME type errorAngular ServiceWorkers + MIME 类型错误
【发布时间】：2018-09-03 16:54:46
【问题描述】：

我正在尝试将服务工作者添加到我们现有的 Angular（5.2，CLI 1.7.1）应用程序中。我做了我应该做的一切：

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

我添加到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));

但我收到了这个错误：

Uncaught (in promise) DOMException: Failed to register a ServiceWorker：脚本具有不受支持的 MIME 类型（'text/html'）。

ERROR 错误：未捕获（承诺中）：SecurityError：注册失败 ServiceWorker：脚本具有不受支持的 MIME 类型 ('文本/html')。在 resolvePromise (polyfills.3e9ea997ddae46e16c09.bundle.js:1)

在我自己的个人小应用程序中，我做了同样的事情，并且没有任何错误。我们遇到此错误的应用程序非常庞大。有很多第三方库。我听说他们可能有问题。

你能帮帮我吗？

另外，我正在检查自己的应用程序以查找可能的差异，但我没有查看 devtools 中的网络选项卡，我注意到应该由服务工作者缓存的文件总是被加载.请问这是正确的行为吗？

【问题讨论】：

标签： angular angular-service-worker

【解决方案1】：

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

您可能正在使用HTML5 pushState style URLs，并且您有configured your web server 来返回服务器上实际不存在的任何文件或文件夹的索引页面（通常是index.html）。如果 ngsw-worker.js 实际不存在，Web 服务器会将请求重定向到 ngsw-worker.js 到 index.html（因此 MIME 类型为“text/html”）。

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

ng build --prod

【讨论】：

非常感谢。我会尝试一下，如果它有效，我会标记你:) 如果可以，当它正常工作时，它应该如何在网络选项卡（devtools）中查看？是否应该下载“缓存”文件？还是应该是瞬时的？
您会看到 200 OK。如果先前已成功加载该文件，则可以从缓存中提供该文件。有关特定文件缓存的更多信息，请参阅stackoverflow.com/questions/38843970/…。
ng build --prod 解决了这个问题。如何运行 ng build --prod 但使用 development environment.ts？
对于 Angular 5 及更早版本，在 angular-cli.json 的“生产”配置中的“环境”属性中添加一个条目。然后，运行“ng build --prod --env=foo”。对于 Angular 6+，要么从 angular.json 的“生产”配置中的“fileReplacements”属性中删除 environment.ts 条目，要么复制配置并根据需要进行修改。然后，运行“ng run yourproject:build:foo”。
或者你可以在你的配置中启用 "serviceWorker": true (angular.json)

【解决方案2】：

在用 Angular8 尝试了很多不同的东西后，我终于将 angular-devkit 从 0.800.2 升级到了 0.803.2

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

然后我得到一个错误：

错误：应在 [PROJECT] 文件夹中找到 ngsw-config.json 配置文件。在 angular.json 配置文件中提供或禁用 Service Worker。

我通过更改解决了这个问题

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

然后终于成功了。

【讨论】：