_co.gotoArchivePage is not a function

Ionic Framework ionic-v3
1

I am quite new to ionic and I am trying to develop a todo application in ionic version 3.9. I tried creating a fab button which would lead me to a “ArchiveTodos” Page, but each time I click on the fab button I get this result:

Error
Close
Runtime Error
_co.gotoArchivePage is not a function
Stack
TypeError: _co.gotoArchivePage is not a function
at Object.eval [as handleEvent] (ng:///AppModule/HomePage.ngfactory.js:152:31)
at handleEvent (http://localhost:8100/build/vendor.js:13963:155)
at callWithDebugContext (http://localhost:8100/build/vendor.js:15472:42)
at Object.debugHandleEvent [as handleEvent] (http://localhost:8100/build/vendor.js:15059:12)
at dispatchEvent (http://localhost:8100/build/vendor.js:10378:25)
at http://localhost:8100/build/vendor.js:11003:38
at HTMLButtonElement. (http://localhost:8100/build/vendor.js:39492:53)
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660)
at Object.onInvokeTask (http://localhost:8100/build/vendor.js:5125:33)
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15581)
Ionic Framework: 3.9.2
Ionic App Scripts: 3.1.11
Angular Core: 5.2.11
Angular Compiler CLI: 5.2.11
Node: 8.9.3
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68... Safari/537.36

HERE IS MY home.ts CODE:

import { Component } from ‘@angular/core’;
import { NavController, AlertController, reorderArray } from ‘ionic-angular’;

import { TodoProvider } from “…/…/providers/todo/todo”;
import { ArchivedTodosPage } from “…/archived-todos/archived-todos”;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
public todos = [];

public reorderIsEnabled = false;
constructor(private todoProvider: TodoProvider, public navCtrl: NavController, private alertController : AlertController, public archivedtodosPage : ArchivedTodosPage) {
this.todos = this.todoProvider.getTodos();
}

goToArchivePage(){
this.navCtrl.push(ArchivedTodosPage);
}

toggleReorder(){
this.reorderIsEnabled = !this.reorderIsEnabled;
}

itemReordered($event){
reorderArray(this.todos, $event);
}

openTodoAlert(){
let addTodoAlert = this.alertController.create({
title: “Add A Todo”,
message: “Enter your Todo”,
inputs: [
{
type: “text”,
name: “addTodoInput”
}
],
buttons: [
{
text: “Cancel”
},
{
text: “Add Todo”,
handler: (inputData)=> {
let todoText;
todoText = inputData.addTodoInput;
this.todoProvider.addTodo(todoText);

               }
             }
            ]
      });
      addTodoAlert.present();

}

}

HERE IS MY home.html CODE:

the Real Todo Edit Done 
     </ion-icon>
   </button>
</ion-buttons>
{{todo}} 
          </ion-icon>
        </button>

      </ion-item-options>
</ion-item-sliding>



</ion-list>

 <button ion-fab (click)="gotoArchivePage()">
 
  <ion-icon name="archive">

  </ion-icon>
   
 </button>

HERE IS MY app.module.ts CODE:

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 { MyApp } from ‘./app.component’;
import { HomePage } from ‘…/pages/home/home’;
import { TodoProvider } from “…/providers/todo/todo”;
import { HttpClientModule } from ‘@angular/common/http’;
import { ArchivedTodosPage } from “…/pages/archived-todos/archived-todos”;

@NgModule({
declarations: [
MyApp,
HomePage,
ArchivedTodosPage
],
imports: [
HttpClientModule,
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ArchivedTodosPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
TodoProvider
]
})
export class AppModule {}

HERE IS MY app.component.ts CODE:

import { Component } from ‘@angular/core’;
import { Platform } from ‘ionic-angular’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;

import { ArchivedTodosPage } from “…/pages/archived-todos/archived-todos”;

import { HomePage } from ‘…/pages/home/home’;
@Component({
templateUrl: ‘app.html’
})
export class MyApp {
rootPage:any = HomePage;

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
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.
statusBar.styleDefault();
splashScreen.hide();
});
}
}

2

paY cloSe aTtentioN tO cAsE.