I am using Ionic 2:
Your system information: ordova CLI: 6.4.0 Ionic Framework Version: 2.0.0-rc.4 Ionic CLI Version: 2.1.18 Ionic App Lib Version: 2.1.9 Ionic App Scripts Version: 0.0.47 ios-deploy version: Not installed ios-sim version: Not installed OS: Windows 10 Node Version: v6.9.2 Xcode version: Not installed
When I run ionic serve, I get the following errors in the CLI:
[13:55:44] ionic-app-scripts 0.0.47 [13:55:44] watch started ... [13:55:44] build dev started ... [13:55:44] clean started ... [13:55:44] clean finished in 16 ms [13:55:44] copy started ... [13:55:44] transpile started ... [13:55:52] template error, "E:\Development\IDE\ionic-apps\theWhoZoo-chat\src\pages\login\build\pages\login\login.html": Error: ENOENT: no such file or directory, open 'E:\Development\IDE\ionic-apps\theWhoZoo-chat\src\pages\login\build\pages\login\login.html' [13:55:52] template error, "E:\Development\IDE\ionic-apps\theWhoZoo-chat\src\pages\home\build\pages\home\home.html": Error: ENOENT: no such file or directory, open 'E:\Development\IDE\ionic-apps\theWhoZoo-chat\src\pages\home\build\pages\home\home.html' [13:55:52] transpile finished in 8.10 s [13:55:52] webpack started ... [13:55:53] copy finished in 8.46 s [13:56:13] webpack finished in 20.63 s [13:56:13] sass started ... [13:56:16] sass finished in 3.37 s [13:56:16] build dev finished in 32.15 s [13:56:17] watch ready in 32.35 s [13:56:17] dev server running: http://localhost:8100/
And the following in the browser when the page tries to open:
There error is occurring here in main.js (core_1.provide(auth_1.FirebaseAuth, {):
exports.AngularFire = AngularFire;
exports.COMMON_PROVIDERS = [
core_1.provide(auth_1.FirebaseAuth, {
useExisting: auth_1.AngularFireAuth
}),
{
provide: tokens_1.FirebaseApp,
useFactory: _getFirebase,
deps: [tokens_1.FirebaseConfig]
},
auth_1.AngularFireAuth,
AngularFire,
database_1.FirebaseDatabase
];
If anyone can help me resolve this, I would appreciate it.
More info:
app.module.ts
import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { FIREBASE_PROVIDERS, defaultFirebase } from 'angularfire2';
@NgModule({
declarations: [
MyApp,
HomePage,
LoginPage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
LoginPage
],
providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler },
FIREBASE_PROVIDERS, defaultFirebase({
apiKey: "xxxxx-xxxx",
authDomain: "xxxx.firebaseapp.com",
databaseURL: "https://xxxx.firebaseio.com",
storageBucket: "xxxx.appspot.com"
})]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { FirebaseAuth } from 'angularfire2';
//declare var firebase: any;
import firebase from 'firebase'
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage: any = LoginPage;
constructor(platform: Platform, private auth: FirebaseAuth) {
firebase.initializeApp({
apiKey: "xxxx-xxx",
authDomain: "xxxx.firebaseapp.com",
databaseURL: "https://xxxx.firebaseio.com",
storageBucket: "xxxx.appspot.com"
});
this.auth.subscribe((data) => {
if (data) {
window.localStorage.setItem('uid', data.auth.uid);
window.localStorage.setItem('displayName', data.auth.displayName);
window.localStorage.setItem('photoURL', data.auth.photoURL);
this.rootPage = HomePage;
}
});
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();
});
}
}
home.ts
import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {LoginPage} from '../login/login';
import {
FirebaseAuth,
AngularFire,
FirebaseListObservable
} from 'angularfire2';
@Component({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
firelist: FirebaseListObservable<any>;
chat: any;
constructor(public nav: NavController, public af: AngularFire, public auth: FirebaseAuth) {
this.firelist = this.af.database.list('/chat', { //mengambil data
query: {
orderByChild: 'negativtimestamp', //order dari data yang terbaru
}
});
}
chatSend(va, vi) { //mengirim pesan chat
this.af.database.list('/chat').push({ // menambahkan data chat ke firebase
uid: window.localStorage.getItem('uid'),
img: window.localStorage.getItem('photoURL'),
username: window.localStorage.getItem('displayName'),
chat_text: va.chatText,
timestamp: Date.now(),
negativtimestamp: -Date.now() //buat nanti ambil data yang terbaru
})
this.chat = '';
}
logout() { // melakukan logout
window.localStorage.removeItem('email'); // remove email dari localStorage
window.localStorage.removeItem('uid'); // remove uid dari localStorage
window.localStorage.removeItem('displayName'); // remove displayName dari localStorage
this.auth.logout();
this.nav.setRoot(LoginPage);// kembali ke halaman LoginPage
}
}
login.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {FirebaseAuth, AuthProviders, AuthMethods} from 'angularfire2';
import {HomePage} from '../home/home';
@Component({
templateUrl: 'build/pages/login/login.html',
})
export class LoginPage {
constructor(private nav: NavController, public auth: FirebaseAuth) {
}
LoginGoogle(){
this.auth.login({
provider: AuthProviders.Google,
method: AuthMethods.Redirect,
}).then((Data) => {
this.nav.setRoot(HomePage);
}).catch((error) => {
console.log(error);
})
}
}
pacjage.json
{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"@angular/common": "2.2.1",
"@angular/compiler": "2.2.1",
"@angular/compiler-cli": "2.2.1",
"@angular/core": "2.2.1",
"@angular/forms": "2.2.1",
"@angular/http": "2.2.1",
"@angular/platform-browser": "2.2.1",
"@angular/platform-browser-dynamic": "2.2.1",
"@angular/platform-server": "2.2.1",
"@ionic/storage": "1.1.7",
"angularfire2": "^2.0.0-beta.3-0930330",
"firebase": "^3.3.0",
"ionic-angular": "2.0.0-rc.4",
"ionic-native": "2.2.11",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.26"
},
"devDependencies": {
"@ionic/app-scripts": "0.0.47",
"typescript": "^2.0.9"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [],
"description": "theWhoZoo-chat: An Ionic project"
}