6
votes

NullInjectorError: aucun fournisseur pour SwUpdate! SwUpdate ne fonctionne pas Angular 5

Maintenant, je sais qu'il y a un million de messages sur No Provider pour tel ou tel service, je sais qu'il doit aller dans les fournisseurs, veuillez lire mon article en entier.

En gros, j'essaie d'utiliser SwUpdate code> pour vérifier s'il y a une mise à jour si oui, actualisez le navigateur:

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

maintenant j'ai enregistré mon serviceworker:

Angular CLI: 1.7.4
Node: 10.15.1
OS: win32 x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

@angular/cli: 1.7.4
@angular/service-worker: 7.2.7
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.0.40
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.10.2
typescript: 2.4.2
webpack: 3.11.0

typescript angular service-worker progressive-web-apps angular-pwa

6 commentaires

Avez-vous essayé de consulter la documentation officielle sur l'utilisation du service worker dans Angular?

@jess oui ... c'est pourquoi je demande pourquoi ça ne marche pas, si la documentation officielle couvrait mon problème, je ne le ferais pas.

avez-vous importé votre module de composants dans votre AppModule ?

@JohnVelasquez oui .. tout fonctionne bien, puis quand j'y mets SwUpdate, l'application plante

cela ne se produit que lorsque vous exécutez localement, non?

@JohnVelasquez Oui, ça se passe en local, je n'ai pas poussé en production pour tester cependant

4 Réponses :

-1
votes

Essayez le code ci-dessous, ajoutez une mise à jour dans la méthode ngOnInit ().

 constructor(private updates: SwUpdate) {}

 ngOnInit(){
     this.updates.available
    .subscribe(() => {
        this.updates.activateUpdate()
            .then(() => document.location.reload());
    });
 }

0 commentaires

7
votes

Votre problème se trouve dans le app.module.ts .

Vous devez importer votre technicien de service comme ceci:

constructor(private swUpdate: SwUpdate) { }

ngAfterViewInit() {
  if (this.swUpdate.isEnabled) {
    this.swUpdate.available
      .subscribe(() => {
        this.swUpdate
          .activateUpdate()
          .then(() => {
            window.location.reload();
          });
      });
  }
}

Le le code que vous aviez auparavant n'incluait le module que lorsque vous étiez en mode production, donc pendant le développement, il n'incluait pas du tout le module.

EDIT:

Dans mon app.component.ts J'ai:

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

EDIT:

Selon votre commentaire, la mise à jour vers la dernière version d'Angular a résolu votre problème , c'est bien qu'ils aient rendu la mise à jour si simple maintenant :)

6 commentaires

Avez-vous ajouté le service worker avec la commande: ng add @ angular / pwa --project * project-name * ? Comme cette commande ajoute les étapes / commandes requises dans l'application

Non, je l'ai fait manuellement en suivant ceci tutoriel mon projet est Angular 5 et ne prend pas en charge ng add

J'ai mis à niveau mon projet vers angular 7 et exécuté ng add @ angular / pwa et cela a résolu mon problème.

Si vous modifiez votre réponse pour dire de mettre à jour vers une version ultérieure d'angular et exécutez ng add @ angular / pwa , je marquerai cette réponse comme correcte car elle m'a pointé dans la bonne direction

@SmokeyDawson J'ai mis à jour ma réponse, c'est vraiment bien qu'ils aient rendu la mise à niveau si simple maintenant :)

d'où vient : [] , il n'y a pas d'opérateur ternaire devant comme je peux le voir, c'est une erreur pour moi.

1
votes

Après de nombreuses recherches, il semble que c'était un problème avec angular 5.2.1 donc ..

J'ai mis à jour mon projet vers angular 7 , exécuté ng add @ angular / pwa et cela a résolu mon problème!

1 commentaires

"@ angular / cli": "~ 7.0.5" Je l'essaye. mais j'ai l'erreur Résultat de règle non valide: Instance de la classe Promise.

2
votes

Pour ceux qui obtiennent cette erreur en essayant d'écrire des tests unitaires, la solution consiste à ajouter le ServiceWorkerModule au tableau des importations avec l'option enable to false lors de la configuration du TestBed:

TestBed.configureTestingModule({
  declarations: [ MyComponent ],
  imports: [
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: false })
  ]
})
.compileComponents();

p >

0 commentaires