NullInjectorError: No provider for SwUpdate! SwUpdate does not work Angular 5

Question

现在我知道有一百万个 post 没有提供商提供这样的服务，我知道它需要进入提供商请阅读我的整个 post。

基本上我正在尝试使用 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 ??

任何帮助将不胜感激

编辑

我也尝试按照官方 angular 文档中的完全相同的方式进行操作，但它给了我同样的错误：

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 来注册 service worker：

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

但现在我遇到了一大堆新的错误

任何其他建议都很好。

谢谢

Answer 1

尝试下面的代码，将更新添加到 ngOnInit() 方法中。

 constructor(private updates: SwUpdate) {}

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

Answer 2

您的问题在 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 3

经过大量研究，这似乎是 angular 5.2.1 的问题，所以..

我将我的项目升级到 angular 7、运行 ng add @angular/pwa，这解决了我的问题！

Answer 4

对于那些在尝试编写单元测试时遇到此错误的人，解决方案是在配置 TestBed 时使用 enable to false 选项将 ServiceWorkerModule 添加到导入数组：

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

NullInjectorError: No provider for SwUpdate! SwUpdate does not work Angular 5

NullInjectorError: No provider for SwUpdate! SwUpdate does not work Angular 5

typescript

service-worker

progressive-web-apps

angular

angular-pwa