web-dev-qa-db-fra.com

Angular ServiceWorkers + type MIME

J'essaie d'ajouter des travailleurs de service à notre application existante angular (5.2, CLI 1.7.1). J'ai fait tout ce que j'étais supposé faire pour:

  1. J'ai créé ngsw-config.json
  2. Je lance le ng set apps.0.serviceWorker=true commande donc j'ai "serviceWorker": true, in angular-cli.json .
  3. J'ai installé "@angular/service-worker": "5.2.9"

  4. J'ai ajouté à app.module.ts :

    import { ServiceWorkerModule } from '@angular/service-worker';
imports: [
    ...
    ServiceWorkerModule.register('/ngsw-worker.js', 
        { enabled: environment.production }),
]

J'ai même essayé d'ajouter ce morceau de code (que j'ai trouvé comme solution quelque part) à main.ts

platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
    if ('serviceWorker' in navigator && environment.production) {
        navigator.serviceWorker.register('/ngsw-worker.js');
    }
}).catch(err => console.log(err));

Mais j'ai eu cette erreur:

DOMException non capturée (en promesse): Échec d'enregistrement d'un ServiceWorker: le script a un type MIME non pris en charge ('text/html').

ERREUR Erreur: non capturée (en promesse): SecurityError: échec d'enregistrement d'un ServiceWorker: le script a un type MIME non pris en charge ('text/html'). à resolverPromise (polyfills.3e9ea997ddae46e16c09.bundle.js: 1)

Dans ma petite application personnelle, j'ai fait de même et cela a fonctionné sans aucune erreur. L'application où nous avons cette erreur est assez énorme. Avec beaucoup de bibliothèques tierces. J'ai lu qu'il peut y avoir un problème avec eux.

Pouvez-vous m'aider s'il vous plaît?

De plus, je vérifiais ma propre application pour trouver des différences possibles, ce que je n'ai pas fait, mais j'ai regardé l'onglet réseau dans devtools et j'ai remarqué que les fichiers qui devraient être mis en cache par le service worker sont toujours chargés. -il un comportement correct s'il vous plaît?

angularangular-service-worker
12
Laker

Cela est probablement dû à un fichier ngsw-worker.js manquant.

Vous utilisez probablement RL de style HTML5 pushState , et vous avez configuré votre serveur Web pour renvoyer votre page d'index (généralement index.html) pour tout fichier ou dossier qui ne fonctionne pas physiquement existent sur le serveur. Si ngsw-worker.js n'existe pas physiquement, le serveur Web redirigera une demande vers ngsw-worker.js vers index.html (d'où le type MIME "text/html").

Le fichier ngsw-worker.js est généralement copié dans votre dossier dist lorsque vous exécutez

ng build --prod
14
artfulmethod

Après avoir essayé beaucoup de choses différentes avec Angular8, j'ai finalement mis à niveau angular-devkit de 0.800.2 à 0.803.2

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

Ensuite, j'ai eu une erreur:

Erreur: devrait trouver un fichier de configuration ngsw-config.json dans le dossier [PROJECT]. Fournissez-en un ou désactivez Service Worker dans votre fichier de configuration angular.json.

J'ai corrigé cela en changeant

"ngswConfigPath": "ngsw-config.json" à "ngswConfigPath": "src/ngsw-config.json"

Ensuite, cela a finalement fonctionné.

0
C13