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 ??

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

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

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

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

РЕДАКТИРОВАТЬ 2 Это то, что я получаю, когда я бегуng -v

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

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

При дальнейшем исследовании кажется, что если вы не можете использовать SwUpdate при локальном запуске проекта, я увидел эту статью angular-pwa-pitfalls и существует решение установить ng-toolkit, но это просто позволяет вам построить свой проект и затем запустить фиктивный сервер, который не имеет смысла, потому что я теряю способность развиваться локально, не создавая проектКаждый раз.

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

Я изменил свой app.module.ts, чтобы зарегистрировать работника сервиса:

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

, но теперь яполучаю целую кучу ошибок

Любые другие предложения будут отличными.

Спасибо

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

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

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

Answer 3

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

 constructor(private updates: SwUpdate) {}

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