web-dev-qa-db-fra.com

Angular 7 Impossible d'enregistrer un ServiceWorker: un mauvais code de réponse HTTP (404) a été reçu lors de la récupération du script

Je reçois l'erreur suivante

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.

J'ai utilisé l'invite "ng add @ angular/pwa" pour ajouter mon fichier ngsw-config.json et manifeste. Cette invite a également ajouté mon "serviceWorker": déclaration vraie et mon registre avec l'environnement à mon app.module.ts

Après avoir vérifié que tout a été ajouté correctement, j'ai exécuté la commande "ng build --prod" qui a réussi et la dist affichée a été créée dossier dist

Ensuite, j'ai exécuté "ng serve --prod" et je reçois les erreurs affichées dans l'image erreurs

Ligne utilisée dans 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/**"
        ]
      }
    }
  ]
}

Placement de serviceWorker true dans 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

Puisque vous avez mentionné la racine en tant que dossier dist, votre service-worker.js le fichier doit se trouver dans le dossier dist après avoir exécuté le ng build script.

Ajouter "precache": "sw-precache --verbose --config=sw-precache-config.js" à votre objet scripts package.json.

Exécutez ensuite: ng build --prod --aot, puis npm run precache. Votre fichier service-worker.js serait maintenant présent dans le dossier dist.

Puisque le compilateur angular a compilé le code de votre application dans des fichiers js et l'a stocké dans le dossier dist, vous devez maintenant servir votre application à partir du dossier dist.

Mais la valeur par défaut ng serve ne le prend pas en charge. Je vous suggère d'utiliser http-server. npm install http-server -g. Ensuite http-server ./dist -o. Cela ouvre votre application sur le navigateur par défaut.

8
Ismoil Shifoev