wake-up-neo.com

Angular 7 Fehler beim Registrieren eines ServiceWorker: Beim Abrufen des Skripts wurde ein ungültiger HTTP-Antwortcode (404) empfangen

Ich erhalte den folgenden Fehler

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.

Ich habe die Eingabeaufforderung "ng add @ angular/pwa" verwendet, um meine Datei "ngsw-config.json" und "manifest" hinzuzufügen. Diese Eingabeaufforderung fügte auch meine "serviceWorker": true-Anweisung und mein Register mit der Umgebung zu "app.module.ts" hinzu

Nachdem ich überprüft hatte, ob alles korrekt hinzugefügt wurde, führte ich den Befehl "ng build --prod" aus, der erfolgreich erstellt wurde, und die angezeigte dist wurde erstellt dist folder

Dann habe ich "ng serve --prod" ausgeführt und erhalte die im Bild gezeigten Fehler Fehler

Zeile, die in app.module.ts verwendet wird

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

ngsw-Konfiguration:

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

Platzierung von serviceWorker true in angular.json:

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

Da Sie das Stammverzeichnis als dist-Ordner angegeben haben, muss sich Ihre Datei service-worker.js Im dist-Ordner befinden, nachdem Sie das Skript ng build Ausgeführt haben.

Fügen Sie Ihrem package.json-Skriptobjekt "precache": "sw-precache --verbose --config=sw-precache-config.js" Hinzu.

Führen Sie dann Folgendes aus: ng build --prod --aot, Dann npm run precache. Jetzt wäre Ihre service-worker.js-Datei im dist-Ordner vorhanden.

Da der Compiler angular Ihren App-Code in js-Dateien kompiliert und im dist-Ordner gespeichert hat, müssen Sie Ihre App jetzt aus dem dist-Ordner bereitstellen.

Die Standardeinstellung ng serve Unterstützt dies jedoch nicht. Ich schlage vor, Sie verwenden http-server. npm install http-server -g. Dann http-server ./dist -o. Dadurch wird Ihre App im Standardbrowser geöffnet.

8
Ismoil Shifoev