Error: Can't resolve all parameters for Storage: (?, ?). ionic

Question

I have had this error "NullInjectorError: No provider for Storage!" and then I add Storage in app.module.ts

then I had another error : Error: Can't resolve all parameters for Storage: (?, ?)

and sometime i had this error :

Uncaught TypeError: Cannot read property 'id' of undefined
core.js:24134 Uncaught TypeError: Cannot read property 'id' of undefined
    at registerNgModuleType (core.js:24134)
    at core.js:24145
    at Array.forEach (<anonymous>)
    at registerNgModuleType (core.js:24145)
    at new NgModuleFactory$1 (core.js:24242)
    at compileNgModuleFactory__POST_R3__ (core.js:27786)
    at PlatformRef.bootstrapModule (core.js:28024)
    at Module../src/main.ts (main.ts:11)
    at __webpack_require__ (bootstrap:84)
    at Object.0 (main.ts:12

I tried importing IonicStorageModule and it is the same

app.moudle.page.ts file :

import { Component, OnInit } from '@angular/core';
import { NavController, NavParams, LoadingController, AlertController, ModalController  } from '@ionic/angular';
import { PersonalinfoService } from 'src/app/services/personalinfo.service';
import { AlertService } from 'src/app/services/alert.service';
import { Saudi } from '../../../app/models/saudi';
import { ErrorsService } from '../../../app/services/errors.service';


@Component({
  selector: 'app-personalinfo',
  templateUrl: './personalinfo.page.html',
  styleUrls: ['./personalinfo.page.scss'],
})
export class PersonalinfoPage{
  public personal_info : any;
  private loading : any;
 
  constructor(public navCtrl: NavController,
    public navParams: NavParams,
    private personalinfoService : PersonalinfoService,
    private errorsService : ErrorsService,
    public modalCtrl: ModalController,
    private loadingCtrl : LoadingController,
    private alertCtrl : AlertController,
    public storage: Storage,
   

    ) {

      this.personal_info = this.navParams.get('personal_info') || new Saudi();

      // هذذا حلو بس ماضبط

      // this.loading = this.loadingCtrl.create({
      //   content: 'Please wait...',
      //   spinner: 'bubbles'
      // });

    }
    
    ionViewDidLoad() {
      console.log('ionViewDidLoad addInfoPage');
    }
    
   
    addInfo() {
      
          let data = {
            personal_info: this.personal_info
          }
          this.personalinfoService.store( JSON.stringify( data ) ).subscribe(
            personal_info => {
              this.personal_info = personal_info;
              this.loading.dismiss();
              this.dismiss( true );
            },
          );
    }

  closeModal(){
    this.dismiss(false);
  }

  dismiss( returnParam : boolean ) {
    let data = { 'personal_info': this.personal_info, 'returnParam': returnParam };
    this.modalCtrl.dismiss( data );
  }

}

Register.page.ts file

import { Component, OnInit } from '@angular/core';
import { ModalController, NavController } from '@ionic/angular';
import { LoginPage } from '../login/login.page';
import { AuthService } from 'src/app/services/auth.service';
import { NgForm } from '@angular/forms';
import { AlertService } from 'src/app/services/alert.service';

@Component({
  selector: 'app-register',
  templateUrl: './register.page.html',
  styleUrls: ['./register.page.scss'],
})
export class RegisterPage implements OnInit {

  constructor(private modalController: ModalController,
    private authService: AuthService,
    private navCtrl: NavController,
    private alertService: AlertService
  ) { }

  ngOnInit() {
  }
  dismissRegister() {
    this.modalController.dismiss();
  }
  async loginModal() {
    this.dismissRegister();
    const loginModal = await this.modalController.create({
      component: LoginPage,
    });
    return await loginModal.present();
  }
  register(form: NgForm) {
    this.authService.register(form.value.name, form.value.email, form.value.password).subscribe(
      data => {
        this.authService.login(form.value.email, form.value.password).subscribe(
          data => {
          },
          error => {
            console.log(error);
          },
          () => {
            this.dismissRegister();
            this.navCtrl.navigateRoot('/personalinfo');
          }
        );
        this.alertService.presentToast(data['message']);
      },
      error => {
        console.log(error);
      },
      () => {
      }
    );
  }
}

before i add personal page everythings works fine. I have nothing else but there is an id added in the model

update :

I get steps back when it is working and starting again

the thing is it happand again

I have page called Home, Personalinfo Home is called after success login and called personalinfo page in Home page I have importing it like this: because I have got this error "No provider for PersonalinfoService!" home-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomePage } from './home.page';
import { PersonalinfoPage } from './../personalinfo/personalinfo.page';


const routes: Routes = [
  {
    path: '',
    component: HomePage
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes),
    PersonalinfoPage
  ],
  exports: [RouterModule],
})
export class HomePageRoutingModule {}

I DID MISS THE

@Injectable({

providedIn: 'root'

})

IN THE SERVICE FILE THATS WHERE CAME ALL THE MISS

THANK YOU

Answer 1

Like it's mentioned in the docs, you need to import IonicStorageModule.forRoot() in the AppModule:

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

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot() // <--- here!
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    // ...
  ],
  providers: [
    // ...
  ]
})
export class AppModule {}

Besides that, in your personalifo.ts file, you're injecting Storage but that's not actually Ionic's storage but the Web Storage API – you can see that when hovering on the Storage class:

In order to inject the right dependency, you'd need to add the following import at the top of the file: import { Storage } from '@ionic/storage'; to make sure you're using Ionic's storage:

import { Storage } from '@ionic/storage'; // <--- here!
// ...

@Component({
  selector: 'app-personalinfo',
  templateUrl: './personalinfo.page.html',
  styleUrls: ['./personalinfo.page.scss'],
})
export class PersonalinfoPage {
  constructor(
    public storage: Storage,
    // ...
  ) {}
}