Ionic NullInjectorError: No provider for NetworkProvider

Question

您好，我正在尝试确定我的设备是否已连接到互联网。但是当我运行应用程序 'ionic serve' 我在控制台中收到此错误：

NullInjectorError: StaticInjectorError(AppModule)[AppComponent -> NetworkProvider]: StaticInjectorError（平台：核心）[AppComponent -> NetworkProvider]： NullInjectorError: 没有 NetworkProvider 的提供者！

我提出了这个问题但它没有解决我的问题有人可以帮助我吗？

网络-provider.ts

import { AlertController, Events } from '@ionic/angular';
import { Network } from '@ionic-native/network/ngx';

export enum ConnectionStatusEnum {
    Online,
    Offline
}


@Injectable()
export class NetworkProvider {

  previousStatus;

  constructor(public alertCtrl: AlertController, 
              public network: Network,
              public eventCtrl: Events) {

    console.log('Hello NetworkProvider Provider');

    this.previousStatus = ConnectionStatusEnum.Online;

  }

    public initializeNetworkEvents(): void {
        this.network.onDisconnect().subscribe(() => {
            if (this.previousStatus === ConnectionStatusEnum.Online) {
                this.eventCtrl.publish('network:offline');
            }
            this.previousStatus = ConnectionStatusEnum.Offline;
        });
        this.network.onConnect().subscribe(() => {
            if (this.previousStatus === ConnectionStatusEnum.Offline) {
                this.eventCtrl.publish('network:online');
            }
            this.previousStatus = ConnectionStatusEnum.Online;
        });
    }

}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { Network } from '@ionic-native/network/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    Network,
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.components.ts

import { Component } from '@angular/core';

import { Platform, Events } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { Network } from '@ionic-native/network/ngx';
import { NetworkProvider } from '../app/network-provider';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  constructor(
    public platform: Platform,
    public events: Events,
    public network: Network,
    public networkProvider: NetworkProvider,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar
  ) {
    this.initializeApp();

  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();

      this.networkProvider.initializeNetworkEvents();

                // Offline event
                this.events.subscribe('network:offline', () => {
                    alert('network:offline ==> '+this.network.type);    
                });

                // Online event
                this.events.subscribe('network:online', () => {
                    alert('network:online ==> '+this.network.type);        
          }); 

    });
  }
}

Answer 1

您正在尝试注入 NetworkProvider 但尚未声明在服务本身或应用程序模块中提供。它需要像 Network、Statusbar 和 Splashscreen 一样声明为提供者。将 NetworkProvider 添加到提供程序数组或将 @Injectable() 更改为 network-provider.ts 中的 @Injectable({providedIn: 'root',}) 以解决此问题。

Ionic NullInjectorError: No provider for NetworkProvider

Ionic NullInjectorError: No provider for NetworkProvider

typescript

ionic-framework

angular

ionic4