web-dev-qa-db-ja.com

Angular 7 ServiceWorkerの登録に失敗しました：スクリプトの取得時に不正なHTTP応答コード（404）を受信しました

次のエラーが表示されます

ERROR Error: Uncaught (in promise): TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.
TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.

プロンプト「ng add @ angular/pwa」を使用して、ngsw-config.jsonとマニフェストファイルを追加しました。このプロンプトは、「serviceWorker」：trueステートメントと環境への登録をapp.module.tsに追加しました

すべてが正しく追加されたことを確認した後、コマンド「ng build --prod」を実行して正常にビルドし、表示されたdistが作成されました dist folder

次に、「ng serve --prod」を実行しましたが、画像に示されているエラーを受信して​​います errors

App.module.tsで使用されている行

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

ngsw-configuration：

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

Angular.jsonでのserviceWorkerの配置：

"configurations": {
            "production": {
              "serviceWorker": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
angularservice-workerangular7angular-service-worker
6
Blue Space

ルートをdistフォルダーとして言及しているため、service-worker.jsスクリプトを実行した後、ng buildファイルはdistフォルダーになければなりません。

"precache": "sw-precache --verbose --config=sw-precache-config.js"をpackage.jsonスクリプトオブジェクトに追加します。

次に、ng build --prod --aotを実行してから、npm run precacheを実行します。これで、service-worker.jsファイルがdistフォルダーに存在するようになります。

angularコンパイラーはアプリコードをjsファイルにコンパイルし、distフォルダーに格納したので、distフォルダーからアプリを提供する必要があります。

ただし、デフォルトのng serveはサポートしていません。 http-serverを使用することをお勧めします。 npm install http-server -g。次にhttp-server ./dist -o。これにより、デフォルトのブラウザーでアプリが開きます。

8
Ismoil Shifoev