I have error while trying to use ionic lab


#1

[app-scripts] [15:39:49] typescript: C:/Users/Desktop/apps/test2/myapp/src/pages/tasklist/task.ts, line: 4
[app-scripts] Unexpected token. A constructor, method, accessor, or property was expected.
[app-scripts] L3: status: string;
[app-scripts] L4: tasks: FirebaseListObservable<any>;.
[app-scripts] Module ‘“C:/Users/Desktop/apps/test2/myapp/node_modules/angularfire2/index”’ has no exported member
[app-scripts] ‘AngularFireDatabase’.
[app-scripts] L9: import { AngularFireDatabaseModule } from ‘angularfire2/database’;
[app-scripts] [15:39:49] typescript: C:/Users/Desktop/apps/test2/myapp/src/app/app.module.ts, line: 10
[app-scripts] [15:39:49] typescript: C:/Users/Desktop/apps/test2/myapp/src/app/app.module.ts, line: 10
[app-scripts] [15:39:49] typescript: C:/Users/Desktop/apps/test2/myapp/src/pages/tasklist/task.ts, line: 4
[app-scripts] [15:39:49] typescript: C:/Users/Desktop/apps/test2/myapp/src/pages/tasklist/tasklist.ts, line: 4
[app-scripts] [15:39:49] typescript: C:/Users/Desktop/apps/test2/myapp/src/pages/tasklist/tasklist.ts, line: 4
[app-scripts] L10: import { AngularFireDatabase, FirebaseListObservable } from ‘angularfire2’;
[app-scripts] Module ‘“C:/Users/Desktop/apps/test2/myapp/node_modules/angularfire2/index”’ has no exported member
[app-scripts] ‘FirebaseListObservable’.
[app-scripts] L9: import { AngularFireDatabaseModule } from ‘angularfire2/database’;
[app-scripts] L10: import { AngularFireDatabase, FirebaseListObservable } from ‘angularfire2’;
[app-scripts] Cannot find name ‘FirebaseListObservable’.
[app-scripts] L3: status: string;
[app-scripts] L4: tasks: FirebaseListObservable<any>;.
[app-scripts] Module ‘“C:/Users/Desktop/apps/test2/myapp/node_modules/angularfire2/index”’ has no exported member
[app-scripts] ‘AngularFireDatabase’.
[app-scripts] L3: import { Task } from ‘./task’;
[app-scripts] L4: import { AngularFireDatabase, FirebaseListObservable } from ‘angularfire2’;
[app-scripts] Module ‘“C:/Users/Desktop/apps/test2/myapp/node_modules/angularfire2/index”’ has no exported member
[app-scripts] ‘FirebaseListObservable’.
[app-scripts] L3: import { Task } from ‘./task’;
[app-scripts] L4: import { AngularFireDatabase, FirebaseListObservable } from ‘angularfire2’;

app.module
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 { TaskListPage } from ‘…/pages/tasklist/tasklist’;
import { AngularFireModule } from ‘angularfire2’;
import { AngularFireDatabaseModule } from ‘angularfire2/database’;
import { AngularFireDatabase, FirebaseListObservable } from ‘angularfire2’;

export const firebaseConfig = {
apiKey: “your-api-key”,
authDomain: “your-authdomain”,
databaseURL: “https://someurl.firebaseio.com”,
storageBucket: “someurl.appspot.com”,
messagingSenderId: “your-messageSenderID”
};

@NgModule({
declarations: [
MyApp,
TaskListPage
],
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp),
AngularFireModule.initializeApp(firebaseConfig),
AngularFireDatabaseModule
],

imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
TaskListPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

app.component
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 { TaskListPage } from ‘…/pages/tasklist/tasklist’;

@Component({
templateUrl: ‘app.html’
})
export class MyApp {
rootPage:any = TaskListPage;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
// OK, 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();
});
}
}

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

@Component({
selector: ‘page-tasklist’,
templateUrl: ‘tasklist.html’
})
export class TaskListPage {
tasks: Array = ;
constructor(public navCtrl: NavController) {
this.tasks = [
{title:‘Milk’, status: ‘open’},
{title:‘Eggs’, status: ‘open’},
{title:‘Syrup’, status: ‘open’},
{title:‘Pancake Mix’, status: ‘open’}
];
}

addItem() {
let theNewTask: string = prompt(“New Task”);
if (theNewTask !== ‘’) {
this.tasks.push({ title: theNewTask, status: ‘open’ });
}
}
markAsDone(slidingItem: ItemSliding, task: any) {
task.status = “done”;
slidingItem.close();
}
removeTask(slidingItem: ItemSliding, task: any) {
task.status = “removed”;
let index = this.tasks.indexOf(task);
if (index > -1) {
this.tasks.splice(index, 1);
}
slidingItem.close();
}

}
task.ts

export class Task {
title: string;
status: string;
tasks: FirebaseListObservable<any>;.
}


#2

It looks like theres a problem with your Angularfire2 package finding FirebaseListObservable.
AngularFire has been released (5.+ ) now so that might be a factor.

can you list you package.json?

From the angularFire migration guide:

AngularFire 5.0 is a refactor of the AngularFireDatabase module. It removes the FirebaseListObservable and FirebaseObjectObservable in favor of a generic based service API.

AngularFire - v5 real-time DB list docs

migrating from angularfire2 v4 --> v5


#3

I am new to ionic. Iam using Mobile App Development with Ionic
CROSS-PLATFORM APPS WITH IONIC, ANGULAR & CORDOVA

THis is the package.json
{
“name”: “myapp”,
“version”: “0.0.1”,
“author”: “Ionic Framework”,
“homepage”: “http://ionicframework.com/”,
“private”: true,
“scripts”: {
“start”: “ionic-app-scripts serve”,
“clean”: “ionic-app-scripts clean”,
“build”: “ionic-app-scripts build”,
“lint”: “ionic-app-scripts lint”
},
“dependencies”: {
@angular/animations”: “5.2.11”,
@angular/common”: “5.2.11”,
@angular/compiler”: “5.2.11”,
@angular/compiler-cli”: “5.2.11”,
@angular/core”: “5.2.11”,
@angular/fire”: “^5.1.0”,
@angular/forms”: “5.2.11”,
@angular/http”: “5.2.11”,
@angular/platform-browser”: “5.2.11”,
@angular/platform-browser-dynamic”: “5.2.11”,
@ionic-native/core”: “~4.15.0”,
@ionic-native/splash-screen”: “~4.15.0”,
@ionic-native/status-bar”: “~4.15.0”,
@ionic/storage”: “2.2.0”,
“angularfire2”: “^5.1.0”,
“cordova-android”: “7.1.2”,
“cordova-ios”: “4.5.5”,
“cordova-plugin-device”: “^2.0.2”,
“cordova-plugin-ionic-keyboard”: “^2.1.3”,
“cordova-plugin-ionic-webview”: “^2.2.3”,
“cordova-plugin-splashscreen”: “^5.0.2”,
“cordova-plugin-statusbar”: “^2.4.2”,
“cordova-plugin-whitelist”: “^1.3.3”,
“firebase”: “^5.5.9”,
“ionic-angular”: “3.9.2”,
“ionicons”: “3.0.0”,
“rxjs”: “5.5.11”,
“sw-toolbox”: “3.6.0”,
“zone.js”: “0.8.26”
},
“devDependencies”: {
@ionic/app-scripts”: “3.2.0”,
@ionic/lab”: “1.0.14”,
@types/request”: “2.48.1”,
“typescript”: “~2.6.2”
},
“description”: “An Ionic project”,
“cordova”: {
“plugins”: {
“cordova-plugin-whitelist”: {},
“cordova-plugin-statusbar”: {},
“cordova-plugin-device”: {},
“cordova-plugin-splashscreen”: {},
“cordova-plugin-ionic-webview”: {
“ANDROID_SUPPORT_ANNOTATIONS_VERSION”: “27.+”
},
“cordova-plugin-ionic-keyboard”: {}
},
“platforms”: [
“android”,
“ios”
]
}
}


#4

Id take a look at these 2 lines,
one is the new v5+ @angular/fire, the other is the old <v5 angularfire2
I’d say make sure your imports point to the former, and update any breaking changes