跟随Josh教程实现Ionic+Passport认证遇错，求协助与可用代码

I totally get the frustration of working through an older tutorial and hitting dependency injection roadblocks—those runtime errors can stop you dead in your tracks. Let's break down why you're seeing this Can't resolve all parameters for Storage: (?) error and fix it step by step.

Why This Happens #

The Storage service in Ionic 2/3 requires proper module configuration in your AppModule to be injectable. The 2018 tutorial might have skipped some setup steps that are now mandatory (or the package structure has changed slightly since then). Your earlier fix for the StatusBar import was on point, but Storage needs a bit more attention.

Step 1: Verify Dependencies Are Installed #

First, make sure you have the correct @ionic/storage package installed. Run this in your project root:

npm install @ionic/storage --save

If you plan to use SQLite as the underlying storage engine (recommended for production), also install the Cordova plugin:

ionic cordova plugin add cordova-sqlite-storage
npm install @ionic-native/sqlite --save

Step 2: Configure StorageModule in AppModule #

This is the critical fix. Open your src/app/app.module.ts and update it to import and configure StorageModule:

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

// Import Storage modules
import { StorageModule } from '@ionic/storage';
// If using SQLite, import this too
import { SQLite } from '@ionic-native/sqlite';

@NgModule({
  declarations: [
    MyApp
    // ... add your other components/pages here
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    // Configure StorageModule with preferred drivers
    StorageModule.forRoot({
      name: '__authdb',
      driverOrder: ['sqlite', 'indexeddb', 'websql'] // Prioritize SQLite if installed
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
    // ... add your other components/pages here
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    SQLite // Add SQLite to providers if using it
  ]
})
export class AppModule {}

Step 3: Check Storage Injection in Your Services/Components #

Make sure wherever you're injecting Storage, you're importing it correctly and using the @Injectable() decorator. For example, in your auth service:

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

@Injectable()
export class AuthService {
  constructor(private storage: Storage) {}

  // Example method to store authenticated user data
  async saveUserSession(user: any) {
    await this.storage.set('currentUser', JSON.stringify(user));
  }
}

Double-check that you've added your AuthService to the providers array in AppModule if it's not already there.

Step 4: Clean and Rebuild #

Cached build files can sometimes cause lingering issues. Run these commands to clear and rebuild your project:

ionic serve --clean
# If that doesn't resolve it, try a full dependency reset:
rm -rf node_modules package-lock.json
npm install
ionic serve

Bonus: Update Other Outdated Imports #

Since you're working with a 2018 tutorial, you'll likely run into more deprecated ionic-native imports. For any other native plugins, replace:

import { SomePlugin } from 'ionic-native';

with:

import { SomePlugin } from '@ionic-native/some-plugin';

And don't forget to add those plugins to your AppModule providers list.

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