NullInjectorError:SwUpdate没有提供程序！ SwUpdate在Angular 5中不起作用

问题描述

现在，我知道有上百万篇关于此类服务无提供商的信息，我知道它需要进入提供商中，请阅读我的整个帖子.

Now I know there are a million posts about No Provider for such and such service, I know it needs to go in the providers please read my entire post.

基本上，我正在尝试使用SwUpdate来检查是否有更新，请刷新浏览器:

Basically I am trying to use SwUpdate to check to see if there is an update if so, refresh the browser:

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

现在我已经注册了服务人员:

now I have registered my serviceworker:

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

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

现在，当我运行我的应用程序时，出现此错误:

now when I run my app I get this error:

NullInjectorError: No provider for SwUpdate!

所以很明显，我尝试将其添加到组件模块中的providers数组中:

so obviously I try and add it to the providers array in my component module:

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

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

现在这应该可以工作，但是现在这一次当我运行应用程序时，出现以下错误:

now this should work but now this time when I run the application I get the following error:

NullInjectorError: No provider for NgswCommChannel!

现在，当我尝试导入NgswCommChannel时，我收到一条错误消息，指出它在@ angular/service-worker中不存在；

Now when I try to import NgswCommChannel I get an error saying it does not exist in @angular/service-worker;

我曾尝试使用Google搜索，但在任何地方都找不到对NgswCommChanel的引用...

I've tried googling around but I cannot find a reference to NgswCommChanel anywhere...

所以我的问题是如何解决此问题，或者如何正确使用SwUpdate?

So my question is how can I fix this, or how can I properly use SwUpdate ??

任何帮助将不胜感激

编辑

我也试图以与正式的Angular文档中完全相同的方式来做到这一点，并且给了我相同的错误:

I have also tried to do it the EXACT same way it is done in the official angular docs and it is giving me the same error:

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

编辑2 这就是我运行ng -v

EDIT 2This is what I get when I run 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-pitfalls ，解决方法是安装ng-toolkit，但这仅允许您构建项目，然后运行一个模拟服务器，这是没有意义的，因为生病的人会失去在本地开发的能力，而不必每次都构建项目.

Upon further investigation it seems as if you can not use SwUpdate when running your project locally, I saw this article angular-pwa-pitfalls and there solution is to install ng-toolkit, but this just allows you to build your project and then run a mock server, which is pointless because ill lose the ability to develop locally without building the project everytime.

编辑4

我更改了app.module.ts以注册服务工作者:

I changed my app.module.ts to register the service worker:

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

但是现在我收到了一大堆错误

but now I'm getting a whole new bunch of errors

任何其他建议都很好.

谢谢

推荐答案

您的问题在app.module.ts中.

您需要像这样导入服务工作者:

You need to import your service worker like this:

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

之前的代码仅在生产模式下才包含模块，因此在开发过程中根本不包含模块.

The code you had before was only including the module when you were in production mode, so during development it wasn't including the module at all.

我的app.component.ts内部有:

constructor(private swUpdate: SwUpdate) { }

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

根据您的评论，更新到最新版本的Angular解决了您的问题，很高兴他们现在使升级变得如此简单:)

As per your comment, updating to latest version of Angular fixed your issue, it's nice they've made upgrading so simple now :)

这篇关于NullInjectorError:SwUpdate没有提供程序！ SwUpdate在Angular 5中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！