Angularfire2 seems to not load in ionic2

[ix-xerri]

2.0.0-beta.6-preview

Angular:
2.2.1
Firebase:
3.6.1
AngularFire:
2.0.0-beta.6-preview
Other (e.g. Ionic/Cordova, Node, browser, operating system):
Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.12
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.44
ios-deploy version: 1.9.0
ios-sim version: 5.0.11
OS: macOS Sierra
Node Version: v6.9.1
Xcode version: Xcode 8.1 Build version 8B62

How to reproduce these conditions

I'm trying to run angularfire after having the plain firebase library working (used only for login so far). I'm using ionic and ionic serve is not working. I'm getting this during ionic serve:

[19:04:51] ionic-app-scripts 0.0.44
[19:04:51] watch started ...
[19:04:51] build dev started ...
[19:04:51] clean started ...
[19:04:51] clean finished in 4 ms
[19:04:51] copy started ...
[19:04:51] transpile started ...
[19:04:55] build dev failed: Cannot read property 'indexOf' of undefined
[19:04:55] copy finished in 3.41 s
[19:04:55] watch ready in 3.43 s
[19:04:55] dev server running: http://localhost:8100/

In the www/build folder the html and the js file are not there so the build is not completing.

Debug output

** Errors in the JavaScript console **

http://localhost:8100/build/main.css Failed to load resource: the server responded with a status of 404 (Not Found)
(2) http://localhost:8100/build/main.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8100/build/main.css Failed to load resource: the server responded with a status of 404 (Not Found)

Expected behavior

Site loads

Actual behavior

Site does not load because of missing js and html files when angular fire is just imported

[mukesh51]

@ix-xerri Seems like this is working as expected. I wrote quick code (not following best practices, but this should work for the purposes of this issue) and have pasted below for your reference. I've attached the service file as well as two pages, which shows the navigation. This should get you going. Let me know, if this doesn't works for you.

I am on Windows 10 with following versions.

Ionic version is 2.1.8
Cordova version is 6.4.0
node version is 6.9.1
npm version is 3.10.8

Snippet from my package.json

"dependencies": {
"@angular/common": "2.1.1",
"@angular/compiler": "2.1.1",
"@angular/compiler-cli": "2.1.1",
"@angular/core": "2.1.1",
"@angular/forms": "2.1.1",
"@angular/http": "2.1.1",
"@angular/platform-browser": "2.1.1",
"@angular/platform-browser-dynamic": "2.1.1",
"@angular/platform-server": "2.1.1",
"@ionic/storage": "1.1.6",
"angularfire2": "^2.0.0-beta.6",
"firebase": "^3.6.1",
"ionic-angular": "2.0.0-rc.3",
"ionic-native": "2.2.3",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.26"
},
"devDependencies": {
"@ionic/app-scripts": "0.0.45",
"typescript": "2.0.6"
},

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AuthService } from '../../providers/auth-service';
import { SuccessPagePage } from '../success-page/success-page';

@component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

constructor(public navCtrl: NavController, private _auth: AuthService) {}

signInWithFacebook(): void {
this._auth.signInWithFacebook()
.then(() => this.onSignInSuccess());
}

private onSignInSuccess(): void {
this.navCtrl.push(SuccessPagePage);
}

}

success-page.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AuthService } from '../../providers/auth-service';
import { HomePage } from '../home/home';

@component({
selector: 'page-success-page',
templateUrl: 'success-page.html'
})
export class SuccessPagePage {

showLogoutButton: boolean = false;
displayName: string;

constructor(public navCtrl: NavController, private _auth: AuthService) {
this.displayName = this._auth.displayName();
}

logoutFacebook() {
this.showLogoutButton = false;
this._auth.signOut();
this.navCtrl.push(HomePage);
}

}

auth-service.ts

import { Injectable } from '@angular/core';
import { AuthProviders, FirebaseAuth, FirebaseAuthState, AuthMethods } from 'angularfire2';

@Injectable()
export class AuthService {
private authState: FirebaseAuthState;

constructor(public auth$: FirebaseAuth) {
this.authState = auth$.getAuth();
auth$.subscribe((state: FirebaseAuthState) => {
this.authState = state;
});
}

get authenticated(): boolean {
return this.authState !== null;
}

signInWithFacebook(): firebase.Promise {
return this.auth$.login({
provider: AuthProviders.Facebook,
method: AuthMethods.Redirect
});
}

signOut(): void {
this.auth$.logout();
}

displayName(): string {
if (this.authState != null) {
return this.authState.facebook.displayName;
} else {
return '';
}
}
}

[ix-xerri]

What do you mean 'as expected'? Please have a look here. There are other users with the same issue. As explained by me AngularFireModule.initializeApp(firebaseConfig) line does not even complete the build so the ionic site does not load.

[mukesh51]

@ix-xerri When you posted your issue, I assumed, you're not able to run your Ionic app with AngularFire2 (specifically, you're not able to authenticate using angular fire2) and hence I pasted the snippet code above, as I am able to get it running on my machine locally. I did mention the various modules, along with their version numbers.

Now with the above link, you're referring to an issue which seems to be more of Ionic and not angularFire2. For me the AngularFireModule.initializeApp(firebaseConfig) line does load.

My repo is here, incase you want to have a look

Please correct me, if I am missing something.

[ix-xerri]

My issue is that I'm not able to load the site correct. But because I initialise AngularFire, the build does not complete. Here is a snippet of my package.json

"dependencies": {
"@angular/common": "2.1.1",
"@angular/compiler": "2.1.1",
"@angular/compiler-cli": "2.1.1",
"@angular/core": "2.1.1",
"@angular/forms": "2.1.1",
"@angular/http": "2.1.1",
"@angular/platform-browser": "2.1.1",
"@angular/platform-browser-dynamic": "2.1.1",
"@angular/platform-server": "2.1.1",
"@ionic/app-scripts": "0.0.44",
"@ionic/storage": "1.1.6",
"angularfire2": "^2.0.0-beta.6",
"firebase": "^3.6.1",
"ionic-angular": "2.0.0-rc.3",
"ionic-native": "2.2.3",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.21"
},
"devDependencies": {
"@ionic/app-scripts": "0.0.45",
"@types/request": "0.0.30",
"typescript": "2.0.6"
},

[mukesh51]

Looks Ok. Do you want to share your repo, especially app.module.ts.

[ix-xerri]

Here is my app.module.ts

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { LoginPage } from '../pages/login/login';
import { ProfilePage } from '../pages/profile/profile';
import { ResetPasswordPage } from '../pages/reset-password/reset-password';
import { SignupPage } from '../pages/signup/signup';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { AngularFireModule } from 'angularfire2';
export const firebaseConfig = {
apiKey: "proper info is enter in this object",
authDomain: "xxx",
databaseURL: "xxx",
storageBucket: "xxx",
messagingSenderId: "xxx"
};

console.log(AngularFireModule);

@NgModule({
declarations: [
MyApp,
LoginPage,
ProfilePage,
ResetPasswordPage,
SignupPage,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
imports: [
IonicModule.forRoot(MyApp),
AngularFireModule.initializeApp(firebaseConfig)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
LoginPage,
ProfilePage,
ResetPasswordPage,
SignupPage,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
providers: []
})
export class AppModule {}

[mukesh51]

You app.module.ts looks good. Won't be able to decipher more from it.
Do you want to share your repo. I can look into it.

[ix-xerri]

Can't share it. Sorry but there are other users with the same issue.

[ix-xerri]

I just tried using the firebase library alone and it works. Can write to a database no problem and there are no errors.

[mukesh51]

Great to hear, you have an option. See if you want to have a second look at my repo.
AngularFire2 works pretty well.

[Demi-ob]

@ix-xerri Did you use firebase library alone for the whole app or for initialising the app in app.module.ts to get it to work. I am still having this problem

[Demi-ob]

@ix-xerri Did you use firebase library alone for the whole app or for initialising the app in app.module.ts to get it to work. I am still having this problem

[Demi-ob]

@mukesh51 everything is the same with the app in ur repo yet the error still exist

[ix-xerri]

didn't try to user angularfire after initialising. So far not angularfire is being used but will try it today!

[Demi-ob]

Ok. Thanks. I will be expecting your response

[ix-xerri]

Same error and the site is not building. I've been told that the app is not loading angularfire when dealing with the same issue but it is is node_modules and using

`import firebase from 'firebase';

import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2';
import { Observable } from 'rxjs/Observable';`

inside /pages

[mukesh51]

@Demi-ob Do you want to share your repo. I can clone it locally to see if I am able to reproduce your issue.

@ix-xerri do you want to modify your above syntax as

import * as firebase from 'firebase';

[ix-xerri]

What is that suppose to do? I still get build dev failed: Cannot read property 'indexOf' of undefined and the build does not finish

[mukesh51]

when you use this statement

import { NavController } from 'ionic-angular';

you're explicitly importing NavController object from 'ionic-angular'. Now, if you want to import another object from the same module, you try to add it in the same import statement by specifying the object, separating it with a comma.

What if you want to import everything in one go, that is where you use *. Hope that helps.

[ix-xerri]

I tried it and got the same error

[mukesh51]

Sorry @ix-xerri . Without looking at the repo, I may not be able to add more. Hopefully someone else.
I'll wait for @Demi-ob to share his repo and see if I can reproduce the issue. The only difference I can see in package.json is the version number of zone.js.

"zone.js": "0.6.21" vs "zone.js": "0.6.26"

I am not sure if that is a problem, but you can give it a try.

[ix-xerri]

I updated zone.js to 0.6.26 but no luck

[chrste90]

You can try to use Firebase 3.3.0. Thats the version angularfire2 uses. Maybe there is a conflict when you try to use two different versions in the same class.

[ix-xerri]

it works! need to go into detail and use angular fire but the build finishes and the site loads no problem.

[Demi-ob]

Hurray!!!. It works. Thanks a lot @ix-xerri, @mukesh54 and @chris1308

[katowulf]

Glad you were able to resolve this. In the future, please follow the issue template and submit a working repro of the issue from the start, and it won't require so much dev time to get to the solution.

[timmaybrown]

@ix-xerri Sorry if I missed it, but what did you do to get this to work? you added Firebase to your package.json in addition to the angularFire package?

[ix-xerri]

You need Firebase 3.3.0 and the latest angularfire

[timmaybrown]

@ix-xerri Thanks got it. I had removed node_modules multiple times. NPM clear cache and correct fresh package.json must have done the trick finally...

[mukesh51]

In my package.json, i do have firebase version

"firebase": "^3.6.1",

and it works fine for me. I've my repo here.

I've got
node version as v6.9.1
npm version as 3.10.8
cordova version as 6.4.0 and
ionic version as 2.1.8

[timmaybrown]

@mukesh51 interesting. I wonder if you were to upgrade your ionic-cli to 2.1.12 if you would have the same error we were experiencing. I will try the ^3.6.1 of firebase repo and see if I can still reproduce the issue.

[Awadhesh31]

when I am retrieving data from firebase it show
URL like http://localhost:4200/listing/-Kdl_wRRkn7nJxgz4B54
but on referencing it show URL like http://localhost:4200/ it remove id from URL