NullInjectorError:没有SwUpdate的提供者！SwUpdate不工作角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时，我会看到一个错误，它不存在于@ar角/service-worker中；

我在谷歌上搜索过，但在任何地方都找不到NgswCommChanel的参考资料.

因此，我的问题是如何解决这个问题，或者如何正确地使用SwUpdate？

如能提供任何帮助，将不胜感激。

编辑

我还试着用在正式的角度文档中所做的完全相同的方式来做这件事，这给了我同样的错误：

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，我看到了本文中的角-pwa陷阱，解决方案是安装ng-工具箱，但这只允许您构建项目，然后运行模拟服务器，这是没有意义的，因为每次在不构建项目的情况下我就失去了在本地开发的能力。

编辑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();
          });
      });
  }
}

编辑：

根据您的评论，更新到最新版本的upgrading您的问题，很好，他们已经使升级变得如此简单了:)

Answer 2

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

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，这解决了我的问题！