No Component Factory found for AddDataPage - ionic-framework

Question

I am trying to learn ionic. This is my very first application. It gives me an error as such:
app.module.ts
import { AddDataPage } from './../pages/add-data/add-data';
import { BrowserModule } from '#angular/platform-browser';
import { ErrorHandler, NgModule } from '#angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '#ionic-native/splash-screen';
import { StatusBar } from '#ionic-native/status-bar';
import { SQLite } from '#ionic-native/sqlite';
import { Toast } from '#ionic-native/toast';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
#NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
SQLite,
Toast
]
})
export class AppModule {}
add-data.ts
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { SQLite, SQLiteObject } from '#ionic-native/sqlite';
import { Toast } from '#ionic-native/toast';
/**
* Generated class for the AddDataPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-add-data',
templateUrl: 'add-data.html',
})
export class AddDataPage {
data = { date:"", type:"", description:"", amount:0 };
constructor(public navCtrl: NavController,
public navParams: NavParams,
private sqlite: SQLite,
private toast: Toast) {}
saveData() {
this.sqlite.create({
name: 'ionicdb.db',
location: 'default'
}).then((db: SQLiteObject) => {
db.executeSql('INSERT INTO expense VALUES(NULL,?,?,?,?)',[this.data.date,this.data.type,this.data.description,this.data.amount])
.then(res => {
console.log(res);
this.toast.show('Data saved', '5000', 'center').subscribe(
toast => {
this.navCtrl.popToRoot();
}
);
})
.catch(e => {
console.log(e);
this.toast.show(e, '5000', 'center').subscribe(
toast => {
console.log(toast);
}
);
});
}).catch(e => {
console.log(e);
this.toast.show(e, '5000', 'center').subscribe(
toast => {
console.log(toast);
}
);
});
}
ionViewDidLoad() {
console.log('ionViewDidLoad AddDataPage');
}
}
I really would like to learn this framework but most of the tutorials I see in youtube are for ionic 2. It is harder to learn if the ionic version I am downloading is different from what I am seeing in the tutorial. Specially if you are very new. Hope you can help. Thank you.

Answer 1

As the error is very clear that you have to add every page you create and use in ionic( if you are not using lazy loading) inside the declarations and also inside the entry components so just add your page AddDataPage in declarations and entry components section
In your app.module.ts inside #ngModule:
declarations: [
MyApp,
HomePage,
AddDataPage
],
And inside entryComponents
entryComponents: [
MyApp,
HomePage,
AddDataPage
]