NullInjectorError：没有 SwPush 的提供者!

在使用 Service Worker 进行推送通知时，有时会遇到这个错误信息："NullInjectorError: No provider for SwPush!". 这意味着应用程序中缺少 SwPush 的提供者，导致无法创建 SwPush 实例。

解决方法

要解决这个问题，可以遵循以下步骤：

1. 在 app.module.ts 中导入 SwPush 模块，并将其添加到模块的 providers 数组中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SwPush } from '@angular/service-worker';

import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  providers: [SwPush],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 在要使用 SwPush 的组件中注入 SwPush 服务：

import { Component } from '@angular/core';
import { SwPush } from '@angular/service-worker';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="subscribe()">Subscribe</button>
  `
})
export class AppComponent {

  constructor(private swPush: SwPush) {}

  subscribe() {
    // 订阅消息通知
  }
}

实例

以下是一个使用 SwPush 的示例，该示例在用户点击按钮时将订阅消息通知：

import { Component } from '@angular/core';
import { SwPush } from '@angular/service-worker';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="subscribe()">Subscribe</button>
  `
})
export class AppComponent {

  constructor(private swPush: SwPush) {}

  subscribe() {
    this.swPush.requestSubscription({
      serverPublicKey: 'your-server-public-key'
    })
    .then(subscription => {
      // 保存订阅的终端密钥
    })
    .catch(error => console.error(error));
  }
}

注意，这里的your-server-public-key应该是您的后端提供的公钥，用于将终端密钥与设备关联。

现在，当用户点击 Subscribe 按钮时，将显示一个通知请求对话框，要求用户授权接收通知。如果授权成功，则可以将终端密钥保存到您的服务器，并将其用于向用户发送推送通知。

结论

如果您在使用 Service Worker 进行推送通知时遇到"NullInjectorError: No provider for SwPush!"，则说明您的应用程序中缺少 SwPush 的提供者。您可以通过将 SwPush 模块添加到 app.module.ts 中，并在要使用 SwPush 的组件中注入 SwPush 服务来解决这个问题。