Angularfire2 + RC3 = "firebase is not defined"


#1

With no other changes, now getting this:

error_handler.js:46EXCEPTION: Error in ./MyApp class MyApp_Host - inline template:0:0 caused by: firebase is not defined

Error: Error in ./MyApp class MyApp_Host - inline template:0:0 caused by: firebase is not defined at ViewWrappedError.BaseError [as constructor] (/…/…/node_modules/@angular/core/src/facade/errors.js:27:34) at ViewWrappedError.WrappedError [as constructor] (/…/…/node_modules/@angular/core/src/facade/errors.js:56:16) at new ViewWrappedError (/…/…/node_modules/@angular/core/src/linker/errors.js:77:16) at _View_MyApp_Host0.DebugAppView._rethrowWithContext (/…/…/node_modules/@angular/core/src/linker/view.js:411:23) at View_MyApp_Host0.DebugAppView.create (/…/…/node_modules/@angular/core/src/linker/view.js:357:18) at ComponentFactory.create (/…/…/node_modules/@angular/core/src/linker/component_factory.js:159:36) at ViewContainerRef.createComponent (/…/…/node_modules/@angular/core/src/linker/view_container_ref.js:120:45) at IonicApp.ngOnInit (/…/…/node_modules/ionic-angular/components/app/app-root.js:37:43) at _View_IonicApp_Host0.detectChangesInternal (IonicApp_Host.ngfactory.js:29:77) at _View_IonicApp_Host0.AppView.detectChanges (/…/…/node_modules/@angular/core/src/linker/view.js:289:14)
context
:
DebugContext
message
:
(…)
name
:
(…)
originalError
:
ReferenceError: firebase is not defined at new Firebase (/…/…/src/providers/firebase-provider.ts:100:40) at AppModuleInjector.get (AppModule.ngfactory.js:366:61) at AppModuleInjector.getInternal (AppModule.ngfactory.js:515:48) at AppModuleInjector.NgModuleInjector.get (/…/…/node_modules/@angular/core/src/linker/ng_module_factory.js:101:27) at ElementInjector.get (/…/…/node_modules/@angular/core/src/linker/element_injector.js:31:48) at _View_MyApp_Host0.createInternal (MyApp_Host.ngfactory.js:16:142) at _View_MyApp_Host0.AppView.create (/…/…/node_modules/@angular/core/src/linker/view.js:142:21) at View_MyApp_Host0.DebugAppView.create (/…/…/node_modules/@angular/core/src/linker/view.js:354:44) at ComponentFactory.create (/…/…/node_modules/@angular/core/src/linker/component_factory.js:159:36) at ViewContainerRef.createComponent (/…/…/node_modules/@angular/core/src/linker/view_container_ref.js:120:45)
stack
:
(…)
proto
:
WrappedError

"@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",
"@types/request": "0.0.30",
"angular2-moment": "^1.0.0-beta.6",
"angularfire2": "^2.0.0-beta.5",
"firebase": "^3.6.1",
"ionic-angular": "^2.0.0-rc.3",
"ionic-native": "2.2.6",
"ionic2-custom-icons": "^0.3.1",
"ionicons": "3.0.0",
"moment": "^2.15.2",
"ng2-translate": "^3.1.3",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.26"

Tried blowing away node_modules, NPM install. Still broken.

I’ve also tried with a new RC3 project, added my code. Same problem.

Any ideas?


#2

Can you copy/paste your /firebase-provider.ts please ?


#3

Sure, here you go:

import { Injectable } from ‘@angular/core’;
import ‘rxjs/Rx’;
import { Subject } from ‘rxjs/Subject’;
import { Observable } from ‘rxjs/Observable’;
import { CONFIG } from ‘…/config/config’;
import { AngularFire, AuthProviders, AuthMethods, FirebaseListObservable } from ‘angularfire2’;
import { FacebookService } from ‘./facebook-provider’;
import * as _ from ‘lodash’;
import { TranslateService } from ‘ng2-translate/ng2-translate’;
import { Storage } from ‘@ionic/storage’;

declare var GeoFire: any;

@Injectable()
export class Firebase {
…variables…
}

constructor(public af: AngularFire, private facebookService: FacebookService, private translate: TranslateService, public storage: Storage) {
… setup …
}


#4

What code is at the line 100, (or 40) ?
Can you put the constructor code please ? It looks like there is a problem around the line 100 of firebase-provider.ts


#5

Line 100 is in the middle of a variable declaration.

// database paths
public paths = {
‘geofireEvents’: ‘/geofire-events/’,
‘events’: /passport-events,
‘bievents’: /passport-events-bitext/,
‘currentUser’: ‘’, <---- this is line 100 --------------->
‘currentUserLocation’: ‘’,
‘actionLog’: /actionLog/,
‘loginUsers’: ‘’,
‘userBookmarks’: ‘’,
‘userBookmarksArticles’: ‘’,
‘userBookmarksEvents’: ‘’,
‘userInterestsEvents’: ‘’,
‘userInterestsArticles’: ‘’,
‘userSettings’: ‘’,
‘interests’: ‘/interests’,
‘actions’: ‘/actions’,
‘actionTypes’: ‘/actionTypes/’,
‘articles’: ‘/articles’,
‘gameRules’: ‘/gamerules’,
‘leaderBoard’: ‘/geofire-leaderBoard’,
‘scores’: ‘/scores/’,
‘stamps’: ‘/passport-stamps/’,
‘userAwardsLog’: ‘’,
‘places’: ‘/passport-places/’,
‘userCategoriesSelected’: ‘’,
‘categories’: ‘/interests’,
‘categoryIndex’: ‘/categoryIndex’,
‘editorsPicks’: ‘/editorsPicks’
};

I think I found it though (not on line 100 as reported):

In the constructor, I have:

this.geoFire = new GeoFire(firebase.database().ref().child(‘geofire-events’));

Without RC3, firebase is defined. I am going to swap back to RC3 and see what happens.