web-dev-qa-db-ja.com

Angular ServiceWorkers + MIMEタイプエラー

既存のangular（5.2、CLI 1.7.1）アプリケーションにService Workerを追加しようとしています。想定していたすべてのことを行いました。

  1. ngsw-config.jsonを作成しました
  2. 私はng set apps.0.serviceWorker=trueコマンドなので、"serviceWorker": true, inangular-cli.json。
  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));

しかし、私はこのエラーを受け取りました：

キャッチされていません（約束どおり）DOMException：ServiceWorkerの登録に失敗しました：スクリプトにサポートされていないMIMEタイプ（ 'text/html'）があります。

エラーエラー：キャッチされていません（約束されています）：SecurityError：ServiceWorkerの登録に失敗しました：スクリプトにサポートされていないMIMEタイプ（ 'text/html'）があります。 resolvePromiseで（polyfills.3e9ea997ddae46e16c09.bundle.js：1）

私自身の個人的な小さなアプリでも同じことを行い、エラーなしで機能しました。このエラーが発生するアプリケーションは非常に巨大です。サードパーティのライブラリがたくさんあります。それらに問題がある可能性があることを読みました。

手伝ってくれませんか？

また、私は自分のアプリケーションをチェックして、可能性のある違いを見つけましたが、違いはありませんでしたが、devtoolsのネットワークタブを見て、Service Workerによってキャッシュされるべきファイルが常にロードされていることに気付きました。それは正しい動作をしてください？

angularangular-service-worker
12
Laker

これはおそらく、ngsw-worker.jsファイルが欠落していることが原因です。

HTML5 pushStateスタイルのURL を使用している可能性が高く、物理的には動作しないファイルまたはフォルダーのインデックスページ（通常はindex.html）を返す webserverの構成 があります。サーバー上に存在します。 ngsw-worker.jsが物理的に存在しない場合、Webサーバーはngsw-worker.jsへのリクエストをindex.htmlにリダイレクトします（つまり、MIMEタイプ "text/html"）。

Ngsw-worker.jsファイルは通常、実行時にdistフォルダーにコピーされます

ng build --prod
14
artfulmethod

Angular8でさまざまなことを試した後、最終的にangular-devkitを0.800.2から0.803.2にアップグレードしました

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

次に、エラーが発生しました：

エラー：[PROJECT]フォルダーでngsw-config.json設定ファイルが見つかるはずです。 angular.json設定ファイルで1つ提供するか、Service Workerを無効にします。

私はこれを修正して修正しました

"ngswConfigPath": "ngsw-config.json"から"ngswConfigPath": "src/ngsw-config.json"

その後、ようやく機能しました。

0
C13