Angular ServiceWorkers + MIME 类型错误

Angular ServiceWorkers + MIME type error

我正在尝试将服务工作者添加到我们现有的 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));

但是我得到这个错误:

Uncaught (in promise) DOMException: Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html').

ERROR Error: Uncaught (in promise): SecurityError: Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html'). at resolvePromise (polyfills.3e9ea997ddae46e16c09.bundle.js:1)

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

你能帮帮我吗?

此外,我正在检查我自己的应用程序以找出可能的差异,但我没有这样做,但我查看了 devtools 中的网络选项卡,我注意到应该由服务缓存的文件工人总是被加载。请问这是正确的行为吗?

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

您可能正在使用 HTML5 pushState style URLs, and you have 到 return 您的索引页(通常是 index.html)来查找服务器上实际不存在的任何文件或文件夹。如果 ngsw-worker.js 实际上不存在,Web 服务器会将对 ngsw-worker.js 的请求重定向到 index.html(因此 MIME 类型 "text/html")。

ngsw-worker.js 文件通常会在您 运行

时复制到您的 dist 文件夹中
ng build --prod

在使用 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"

然后终于成功了。