Cannot read property 'executeSql' of undefined

I am encountering this error whenever I run my app. Basically, what I want to do is to check whether a table is empty. If it is, I will set the Tutorial Page as the root, else Another Page.

I have created a DatabaseProvider, and there I have created the tables inside the constructor. Now, accessing the DatabaseProvider in the app.component will give me an error stated in the title.

Here is my DatabaseProvider:

constructor(public sqlite: SQLite, public platform: Platform) {
    
    platform.ready().then(() => {

      this.sqlite.create({name: 'budgetary.db', location: 'default'}).then((db: SQLiteObject) => {

      this.database = db;
        this.database.executeSql('CREATE TABLE IF NOT EXISTS total_savings (total_savings_id PRIMARY KEY NOT NULL DEFAULT 1 CHECK(total_savings_id = 1), amount REAL NOT NULL)', {})
          .then(res => console.log('Total Savings table created!'))
          .catch(e => console.log('Failed to create Total Savings table'));
      })

    });
    
	}

app.component:

constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, public dp: DatabaseProvider) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Dashboard', icon: 'pie', component: DashboardPage },
      { title: 'Savings', icon: 'trending-up', component: SavingsPage },
      { title: 'Wallet', icon: 'cash', component: WalletPage },
      { title: 'Expenses', icon: 'trending-down', component: TabsPage },
      { title: 'Settings', icon: 'settings', component: SettingsPage },
      { title: 'About App', icon: 'information-circle', component: AboutPage }
    ];

    this.getTotalSavings();

  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      
      //this is to check if Total Savings table is empty. If not, skip tutorial
      
    });
  }

  getTotalSavings() {

    this.dp.getTotalSavings()
      .then(data => {
        
        if(data.length == 0) {

          this.rootPage = TutorialPage;

        }else {

          this.rootPage = SavingsPage;

        }

      })

  }

Where did I go wrong? I’ve been searching for forums regarding this one but I cannot get my head around this one.

Thank you!

Anyone has any idea how to fix this?

1 Like

Did you manage to solve this issue? I am having the same issue as yours.