Tubo-Ibim Braide
Sep 1, 2018 · 2 min read

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

I will be most grateful for your kind assistance.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade