Help new Ionic Developer here


#1

I’m getting an issue in which nothing is displaying on my ionic app.I’m thinking it has something to do with app.module.ts file.Does anybody know how to fix this.By the way, Im using ionic serve – lab to run.This is an to do app using some angular fire modules.Only after did I modify my package.json and app.module.ts did things do wrong.

tasklist.ts
import { Component } from ‘@angular/core’;
import { NavController,ItemSliding } from ‘ionic-angular’;
import {AngularFireDatabase, FirebaseListObservable } from ‘angularfire2/database’;

//grab object from task
@Component({
selector: ‘page-tasklist’,
templateUrl: ‘tasklist.html’
})
export class TaskListPage {
//Formerly an Array: tasks:Array= [];
tasks:FirebaseListObservable<any[]>;
//this is like a contructor of any class
constructor(public navCtrl: NavController, public af:AngularFireDatabase) {
//refers to the constuctor

//updated angular
this.tasks= af.list('/tasks');

}

//this is a function in typescript
addItem(){
//variable declaration
let theNewtask: string = prompt(“New task”);
if(theNewtask !== ’ '){
this.tasks.push({title:theNewtask,status:‘open’});
}
}
markAsDone(slidingItem:ItemSliding,task:any){
this.tasks.update(task.$key,{status:‘done’});
slidingItem.close();
}
removetask(slidingItem:ItemSliding,task:any){
this.tasks.remove(task.$key);
slidingItem.close();
}
}
app.module.ts
import { NgModule, ErrorHandler } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { HttpModule } from ‘@angular/http’;
import { IonicApp, IonicModule, IonicErrorHandler } from ‘ionic-angular’;
import { MyApp } from ‘./app.component’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import { TaskListPage } from ‘…/pages/tasklist/tasklist’;
import { AngularFireModule} from ‘angularfire2/’;
import { AngularFireDatabaseModule } from ‘angularfire2/database’;
export const firebaseConfig={
apiKey: “AIzaSyCCIoGHcQiGUzETHTcEb-BgUtSTvCGpocU”,
authDomain: “ionic2do-1c78e.firebaseapp.com”,
databaseURL: “https://ionic2do-1c78e.firebaseio.com”,
projectId: “ionic2do-1c78e”,
storageBucket: “ionic2do-1c78e.appspot.com”,
messagingSenderId: “31902787903”
};
@NgModule({
declarations: [
MyApp,
TaskListPage
],
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp),
AngularFireModule.initializeApp(firebaseConfig),
AngularFireDatabaseModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
TaskListPage
],
providers: [
StatusBar,
SplashScreen,
{ provide: ErrorHandler, useClass: IonicErrorHandler }]
})
export class AppModule {}


#2

Please edit your post and use the </> button above the post input field to format your code or error message or wrap it in ``` (“code fences”) manually. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.