NullInjectorError: Нет провайдера для SwUpdate! SwUpdate не работает Angular 5

Question

Теперь я знаю, что существует миллион постов об отсутствии провайдеров для того или иного сервиса, и я знаю, что для этого нужно обратиться к провайдерам, пожалуйста, прочитайте весь мой пост.

В основном я пытаюсь использовать SwUpdate чтобы проверить, если есть обновление, обновите браузер так

import { SwUpdate } from '@angular/service-worker';
...

export class ...

constructor(
    private _swUp: SwUpdate
){} 


ngOnInit() {
    this.checkForUpdate();
}

checkForUpdate() {
    if (this._swUp.isEnabled) {
       this._swUp.available
           .subscribe(() => {
               window.location.reload();
           });
    }
}

теперь я зарегистрировал своего работника по обслуживанию оборудования так...

import { ServiceWorkerModule } from '@angular/service-worker'; 
...

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

теперь, когда я запускаю свое приложение, я получаю эту ошибку...

NullInjectorError: No provider for SwUpdate!

так очевидно, что я пытаюсь добавить его в массив поставщиков в моем модуле компонента, как это...

import { ServiceWorkerModule, SwUpdate } from '@angular/service-worker'; 
...

imports: [
    environment.production ? ServiceWorkerModule.register('ngsw-worker.js') : [],
],
providers: [
    SwUpdate
]

теперь это должно работать, но теперь, когда я запускаю приложение, я получаю следующую ошибку

NullInjectorError: No provider for NgswCommChannel!

Теперь, когда я пытаюсь импортировать NgswCommChannel Я получаю сообщение о том, что его нет в @ angular / service-worker;

Я пытался погуглить, но не могу найти ссылку на NgswCommChanel в любом месте...

Поэтому мой вопрос: как я могу это исправить или как правильно использовать SwUpdate??

любая помощь будет оценена

РЕДАКТИРОВАТЬ

Я также пытался сделать это ТОЧНО таким же образом, как это делается в официальных угловых документах, и это дает мне ту же ошибку

constructor(
    updates: SwUpdate
) {
    updates.available
        .subscribe(() => {
            updates.activateUpdate()
                .then(() => document.location.reload());
        });
}

Спасибо

Answer 1

Ваша проблема в app.module.ts,

Вам нужно импортировать вашего сервисного работника следующим образом:

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

Код, который у вас был ранее, включал модуль только тогда, когда вы работали в производственном режиме, поэтому во время разработки он вообще не включал модуль.

РЕДАКТИРОВАТЬ:

Внутри моего app.component.ts Я имею:

constructor(private swUpdate: SwUpdate) { }

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

РЕДАКТИРОВАТЬ:

Согласно вашему комментарию, обновление до последней версии Angular исправило вашу проблему, хорошо, что теперь они сделали обновление настолько простым:)

Answer 2

Для тех, кто получает эту ошибку при попытке написать модульные тесты, решение состоит в том, чтобы добавить ServiceWorkerModule в массив импорта с параметром enable to false при настройке TestBed:

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

Answer 3

После долгих исследований кажется, что это была проблема с angular 5.2.1 так..

Я обновил свой проект до angular 7, побежал ng add @angular/pwa и это решило мою проблему!

Answer 4

Попробуйте приведенный ниже код, добавьте обновление в метод ngOnInit().

 constructor(private updates: SwUpdate) {}

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