NullInjectorError：没有存储提供者！离子6

Question

尝试在我的离子应用程序中使用存储版本2.1.3，但出现错误：

NullInjectorError: R3InjectorError(AppModule)[AppModule -> Storage -> Storage -> Storage]: NullInjectorError: No provider for Storage! ionic 6

我看到一些关于它的帖子，告诉我们使用 forRoot 语句，但无论如何都不起作用。

我的应用程序模块：

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

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

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

import { IonicStorageModule } from '@ionic/storage'
import {HttpClientModule} from '@angular/common/http'

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

  constructor(private storage: Storage) { }

  async ngOnInit() {
    await this.storage.create();
  }
}

如果有任何其他有用的信息，请询问，我会提供。谢谢！

Answer 1

您没有从任何地方导入构造函数中的

Storage

；它应该从以下位置导入：

import { Storage } from '@ionic/storage';

否则可能是导入 typescript 的 Web Storage API 接口。

Answer 2

你不应该初始化AppModule中的代码

应用程序模块：

import { NgModule, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { IonicStorageModule } from '@ionic/storage'
import {HttpClientModule} from '@angular/common/http'

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

然后在你的AppComponent中

import { Component } from '@angular/core';
import { Storage } from '@ionic/storage-angular';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {

  constructor(private storage: Storage) {
  }

  async ngOnInit() {
    // If using a custom driver:
    // await this.storage.defineDriver(MyCustomDriver)
    await this.storage.create();
  }
}

Answer 3

对于再次遇到此问题的人，就我而言，解决方案是在 AppModule 的提供程序部分中添加存储。 使用

npm install @ionic/storage

安装后，我将此代码用于

AppModule

:

// ... other imports ...
import { Storage } from '@ionic/storage';

@NgModule({
    declarations: [AppComponent],
    imports: [
        AppRoutingModule,
        BrowserModule,
        IonicModule.forRoot(),
    ],
    providers: [
        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
        Storage // This was the part I couldn't find online
    ],
    bootstrap: [AppComponent],
})
export class AppModule { }

在服务或页面中，我只是将存储注入到构造函数中，然后调用创建和获取/设置方法

import { Storage } from '@ionic/storage';

... code ....

constructor(private storage: Storage) { }

async getFromStorage(): Promise<void> {
    const storage = await this.storage.create();
    const data = await storage.get(...);
}