_co.gotoArchivePage is not a function

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

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)...


Environment:

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


home.ts:

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();





home.html:

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>


app.module.ts:

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


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();
);




I will be most grateful for your assistance as I have been struggling to get this issue fixed for quite sometime now

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.