Angularfire: Firebase is not defined

[JT-Bruch]

Version info

Angular:
2.1.2

Firebase:
3.5.2

AngularFire:
2.0.0-beta.5

Other (e.g. Ionic/Cordova, Node, browser, operating system):
[email protected]

How to reproduce these conditions

1. Create a test project.
2. Follow the instructions here
3. Attempt to access the global firebase object and immediate errors.

Steps to set up and reproduce

1. Clone https://github.com/JT-Bruch/AngularFire2-TestProject
2. Run npm install
3. Run ng serve.
4. See errors from debug output.

Sample data and security rules

1. Hook up any firebase application in app.module.ts.

Debug output

* Errors in the JavaScript console *

error_handler.js:47EXCEPTION: Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: firebase is not definedErrorHandler.handleError @ error_handler.js:47(anonymous function) @ application_ref.js:210ZoneDelegate.invoke @ zone.js:232onInvoke @ ng_zone.js:236ZoneDelegate.invoke @ zone.js:231Zone.run @ zone.js:114(anonymous function) @ zone.js:502ZoneDelegate.invokeTask @ zone.js:265onInvokeTask @ ng_zone.js:227ZoneDelegate.invokeTask @ zone.js:264Zone.runTask @ zone.js:154drainMicroTaskQueue @ zone.js:401 error_handler.js:49ORIGINAL EXCEPTION: firebase is not definedErrorHandler.handleError @ error_handler.js:49(anonymous function) @ application_ref.js:210ZoneDelegate.invoke @ zone.js:232onInvoke @ ng_zone.js:236ZoneDelegate.invoke @ zone.js:231Zone.run @ zone.js:114(anonymous function) @ zone.js:502ZoneDelegate.invokeTask @ zone.js:265onInvokeTask @ ng_zone.js:227ZoneDelegate.invokeTask @ zone.js:264Zone.runTask @ zone.js:154drainMicroTaskQueue @ zone.js:401 error_handler.js:52ORIGINAL STACKTRACE:ErrorHandler.handleError @ error_handler.js:52(anonymous function) @ application_ref.js:210ZoneDelegate.invoke @ zone.js:232onInvoke @ ng_zone.js:236ZoneDelegate.invoke @ zone.js:231Zone.run @ zone.js:114(anonymous function) @ zone.js:502ZoneDelegate.invokeTask @ zone.js:265onInvokeTask @ ng_zone.js:227ZoneDelegate.invokeTask @ zone.js:264Zone.runTask @ zone.js:154drainMicroTaskQueue @ zone.js:401 error_handler.js:53ReferenceError: firebase is not defined at new AppComponent (http://localhost:4200/main.bundle.js:42102:9) at new Wrapper_AppComponent (/AppModule/AppComponent/wrapper.ngfactory.js:7:18) at DebugAppView._View_AppComponent_Host0.createInternal (/AppModule/AppComponent/host.ngfactory.js:16:28) at DebugAppView.AppView.create (http://localhost:4200/main.bundle.js:52638:21) at DebugAppView.create (http://localhost:4200/main.bundle.js:52838:44) at ComponentFactory.create (http://localhost:4200/main.bundle.js:37713:36) at ApplicationRef_.bootstrap (http://localhost:4200/main.bundle.js:23568:40) at http://localhost:4200/main.bundle.js:23477:89 at Array.forEach (native) at PlatformRef_._moduleDoBootstrap (http://localhost:4200/main.bundle.js:23477:42)ErrorHandler.handleError @ error_handler.js:53(anonymous function) @ application_ref.js:210ZoneDelegate.invoke @ zone.js:232onInvoke @ ng_zone.js:236ZoneDelegate.invoke @ zone.js:231Zone.run @ zone.js:114(anonymous function) @ zone.js:502ZoneDelegate.invokeTask @ zone.js:265onInvokeTask @ ng_zone.js:227ZoneDelegate.invokeTask @ zone.js:264Zone.runTask @ zone.js:154drainMicroTaskQueue @ zone.js:401 error_handler.js:56ERROR CONTEXT:ErrorHandler.handleError @ error_handler.js:56(anonymous function) @ application_ref.js:210ZoneDelegate.invoke @ zone.js:232onInvoke @ ng_zone.js:236ZoneDelegate.invoke @ zone.js:231Zone.run @ zone.js:114(anonymous function) @ zone.js:502ZoneDelegate.invokeTask @ zone.js:265onInvokeTask @ ng_zone.js:227ZoneDelegate.invokeTask @ zone.js:264Zone.runTask @ zone.js:154drainMicroTaskQueue @ zone.js:401 error_handler.js:57DebugContext {_view: _View_AppComponent_Host0, _nodeIndex: 0, _tplRow: 0, _tplCol: 0}

* Output from firebase.database.enableLogging(true); *

This does not work either.

* Screenshots *

• N/A

Expected behavior

• Accessing the global firebase object would work without issue. It is being included in main.bundle.js

Actual behavior

• All the exceptions once you attempt to access the firebase object.

[mukesh51]

@JT-Bruch add the following line in your app.component.ts and it should work.

import * as firebase from 'firebase';

[JT-Bruch]

@mukesh51 yep that worked, although for those who have been watching this, or the other issues, you will need to remove the import * as firebase from 'firebase'; from angularfire.d.ts and then restart ng serve.

If you do not do this, you will get duplicate identifier errors all over the place. (Which makes sense if you think about how Webpack is loading everything)

[cre8]

@JT-Bruch did like you said: adding to app.component.ts, removing from angularfire2.d.ts and restarting the server.
Still get the duplicate identifier error

[uzumakinaruto123]

@cre8 when you get duplicate identifier error , simply delete the firebase module from angularfire2 node_modules.

i.e delete this node_modules/angularfire2/node_modules/firebase

thats it.

Angularfire2 should remove it from dependency , because we donpm install angularfire2 firebase --save

and angularfire2 already has firebase module.

[kishandonepudi]

I'm still getting the error even after using
import * as firebase from 'firebase';

Please help...