Ionic应用报错NullInjectorError: No provider for Storage求助

错误原因 #

该错误是因为Angular无法找到Storage的依赖提供者，未在模块中正确配置Ionic Storage的注入规则，同时新版本Ionic Storage需要手动完成初始化操作。

解决步骤 #

1. 确认依赖安装 #

如果尚未安装官方最新的Ionic Storage包，执行以下命令安装：

npm install @ionic/storage-angular

2. 在模块中配置IonicStorageModule #

找到错误提示里的RecentPageModule（或全局的AppModule），导入IonicStorageModule并添加到imports数组，通过forRoot()完成全局配置：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicStorageModule } from '@ionic/storage-angular';
// 其他必要导入

@NgModule({
  imports: [
    CommonModule,
    // 添加Storage模块配置
    IonicStorageModule.forRoot(),
    // 其他模块
  ],
  declarations: [RecentPage]
})
export class RecentPageModule {}

3. 在PhotoService中初始化Storage #

新版本Ionic Storage必须先调用create()完成初始化，才能正常调用set()等方法。修改你的PhotoService：

@Injectable({
  providedIn: 'root'
})
export class PhotoService {

  public photo: Photo[]=[];
  private PHOTO_STORAGE: string = "photos";

  constructor(private platform: Platform, private store: Storage) {
    // 初始化Storage
    this.initStorage();
  }

  // 添加初始化方法
  private async initStorage() {
    await this.store.create();
    // 可选：启动时读取已保存的照片
    const savedPhotos = await this.store.get(this.PHOTO_STORAGE);
    if (savedPhotos) {
      this.photo = JSON.parse(savedPhotos);
    }
  }

  // 其余方法保持不变
}

4. 修正属性名一致性问题 #

你的Photo接口定义的是filepath，但web端返回的是filePath（大小写不一致），建议统一：

export interface Photo{
  filepath:string;
  webViewPath: string;
}

// 在savePicture方法的web端返回部分修改：
return{
  filepath: fileName, // 将filePath改为filepath
  webViewPath: cameraPhto.webPath
}

完成以上修改后，Angular就能正确识别Storage的依赖提供者，Storage也完成了初始化，调用set()方法即可正常工作。

内容的提问来源于stack exchange，提问作者du7ri