web-dev-qa-db-ja.com

NullInjectorError：SwUpdateのプロバイダーがありません！ SwUpdateが機能しないAngular 5

今、私はそのようなサービスのためのプロバイダーなしについての百万の投稿があることを知っています、私はそれがプロバイダーに行く必要があることを知っています私の投稿全体を読んでください。

基本的に、私は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!

だから明らかに私はそれを私のコンポーネントモジュールのproviders配列に追加しようとします：

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 docsで行われているのとまったく同じ方法でそれを実行しようとしましたが、同じエラーが発生します：

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

EDIT 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を変更してServiceWorkerを登録しました。

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

しかし今、私はまったく新しいたくさんのエラーを受け取っています

enter image description here

他の提案は素晴らしいでしょう。

ありがとう

angulartypescriptservice-workerprogressive-web-appsangular-pwa
6
Smokey Dawson

多くの調査の結果、それはangular 5.2.1の問題だったようです。

プロジェクトをangular 7にアップグレードし、ng add @angular/pwaを実行したところ、問題は解決しました。

1
Smokey Dawson