'Can't resolve all parameters for LoginPage' when injecting Storage

Ionic Framework Ionic Angular
1

I have an app just about finished, but I need to store a few things in local storage. So, I followed https://ionicframework.com/docs/angular/storage to install ionic-storage.

Now, my page complains that it “Can’t resolve all parameters” when I have

private storage: Storage

as an injection into the constructor.

(Now, the really weird thing is the ionic build and ionic serve don’t complain about this “error”. So, maybe I should just ignore it.)

I made a test app with @ionic/storage being used, and it works fine, but my existing app has this problem. Here is the first part of the file:

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

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage {

  public userId = '';
  public firstName = '';
  public lastName = '';

  constructor(
    private storage: Storage,
  ) { }

My app.module.ts looks like this:

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

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { IonicStorageModule } from '@ionic/storage';
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 { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { firebaseConfig } from './credentials';

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

Is it possible this problem is due to incompatibility between ionic/storage and the firebase stuff?

here is my setup:

$ ionic info

Ionic:

   Ionic CLI                     : 6.9.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.1.1
   @angular-devkit/build-angular : 0.901.6
   @angular-devkit/schematics    : 9.1.6
   @angular/cli                  : 9.1.6
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.1.0
   @capacitor/core : 2.1.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (2 plugins total)

Utility:

   cordova-res                          : not installed
   native-run (update available: 1.0.0) : 0.3.0

System:

   Android SDK Tools : 26.1.1 (/Users/vtn2/Library/Android/sdk)
   NodeJS            : v10.16.0 (/usr/local/bin/node)
   npm               : 6.13.7
   OS                : macOS Catalina
   Xcode             : Xcode 11.5 Build version 11E608c
2

Hmm I just tested things in blank app and it seems to be working fine on my machine.

Can you replicate it in a small isolated demo?

3

I can’t replicate it. I made a small test app and everything seems fine. But, in my app, whenever I add private storage: Storage as an injection, my linter seems unhappy. Very weird.