HMR Issues for initializeApp()

[ArthurianX]

Hi guys, I'm referencing this issue here PatrickJS/angular-hmr#17, it's still a problem, I think I should report it here as well.

Angular:
4.2.5
Firebase:
4.1.3
AngularFire:
4.0.0-rc.1
Other (e.g. Ionic/Cordova, Node, browser, operating system):
AngularClasss Boilerplate with the server:dev:hmr task for starting

How to reproduce these conditions

Just like https://github.com/angular/angularfire2/blob/master/docs/1-install-and-setup.md on step 5, when using the initializeApp after a HMR rebuild the connection the database app fails to load with am error.

Failing test unit, Plunkr, or JSFiddle demonstrating the problem

I have no pluncker yet, I'm using env variables (https://github.com/AngularClass/angular-starter/wiki/How-to-pass-environment-variables%3F) normally, but I even tried hardcoding the API details and app-name itself in the initializeApp parameters and the results are the same

Steps to set up and reproduce

Have the application running and make a change to any component, HMR will reload only what it needs, and then the above error is thrown.

Sample data and security rules

no rules.

{
  "rules": {
    
  }
}

Debug output

AppComponent_Host.ngfactory.js:5 ERROR FirebaseError {code: "app/no-app", message: "Firebase: No Firebase App '[DEFAULT]' has been cre…- call Firebase App.initializeApp() (app/no-app).", name: "[DEFAULT]", ngDebugContext: DebugContext_, ngErrorLogger: function…}
View_AppComponent_Host_0 @ AppComponent_Host.ngfactory.js:5
proxyClass @ compiler.es5.js:14962
DebugContext_.logError @ core.es5.js:13448
ErrorHandler.handleError @ core.es5.js:1080
(anonymous) @ core.es5.js:4468
ZoneDelegate.invoke @ zone.js:391
onInvoke @ core.es5.js:3933
ZoneDelegate.invoke @ zone.js:390
Zone.run @ zone.js:141
(anonymous) @ zone.js:817
ZoneDelegate.invokeTask @ zone.js:424
onInvokeTask @ core.es5.js:3924
ZoneDelegate.invokeTask @ zone.js:423
Zone.runTask @ zone.js:191
drainMicroTaskQueue @ zone.js:584
AppComponent_Host.ngfactory.js:5 ERROR CONTEXT DebugContext_ {view: Object, nodeIndex: 1, nodeDef: Object, elDef: Object, elView: Object}
View_AppComponent_Host_0 @ AppComponent_Host.ngfactory.js:5
proxyClass @ compiler.es5.js:14962
DebugContext_.logError @ core.es5.js:13448
ErrorHandler.handleError @ core.es5.js:1085
(anonymous) @ core.es5.js:4468
ZoneDelegate.invoke @ zone.js:391
onInvoke @ core.es5.js:3933
ZoneDelegate.invoke @ zone.js:390
Zone.run @ zone.js:141
(anonymous) @ zone.js:817
ZoneDelegate.invokeTask @ zone.js:424
onInvokeTask @ core.es5.js:3924
ZoneDelegate.invokeTask @ zone.js:423
Zone.runTask @ zone.js:191
drainMicroTaskQueue @ zone.js:584
main.browser.ts:40 FirebaseError {code: "app/no-app", message: "Firebase: No Firebase App '[DEFAULT]' has been cre…- call Firebase App.initializeApp() (app/no-app).", name: "[DEFAULT]", ngDebugContext: DebugContext_, ngErrorLogger: function…}
(anonymous) @ main.browser.ts:40
ZoneDelegate.invoke @ zone.js:391
Zone.run @ zone.js:141
(anonymous) @ zone.js:817
ZoneDelegate.invokeTask @ zone.js:424
Zone.runTask @ zone.js:191
drainMicroTaskQueue @ zone.js:584

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

** Screenshots **

https://www.dropbox.com/s/xh98ut9xxv9czip/Screenshot%202017-07-05%2015.04.49.png?dl=0

Expected behavior

HMR shouldn't interfere with AngularFire2

Actual behavior

Pff, AngularFire2 borks

[ArthurianX]

Do you guys have a ready made PlunkR with AngularFire2 and Angular 4 ?

(I have no idea how to make one, I saw some SystemJS ones but I don't have the rest of the evening to spend on researching this.)

[ArthurianX]

Actually, now that I think about it, even on PlunkR you can't test the issue because you have to have a HMR server connected to that PlunkR instance.

How could I show you guys this ?

[davideast]

@ArthurianX For this kind of issue it's probably best for a Github repo. If you can whip up a repro with some easy build steps I'll be happy to take a look.

[ArthurianX]

@davideast I'm also trying to make a production build for my app and on AoT it AngularFire fails to initializeApp().
here: https://www.dropbox.com/s/ka8s1nnstcrn0eo/Screenshot%202017-07-09%2016.28.20.png?dl=0

I tried a lot of options, the conclusion is that JiT works, AoT doesn't.

I'll put together a more comprehensive repo to test this the next few days and I'll share the link here.

[ValentinFunk]

I submitted a PR(#1021) for this that fixes it, it's merged already but it's not yet in NPM. You can use this to get around it:

package.json

"dependencies": {
  "angularfire2": "https://cdn.rawgit.com/Kamshak/angularfire2/fa0e4753/angularfire2-v4.0.0-rc.2.tgz"
}

[ArthurianX]

@kamshak Thanks a lot! Will try it out asap.

[pvdyck]

@kamshak Hi ! I am having exactly the same problem with an Ionic configuration.
You fix did not solve the issue ... I am still getting "auth/invalid-api-key" when I enable AOT on a production build.

[ValentinFunk]

@pvdyck: I believe you're having a different issue - this is about HMR during development where it will load the firebase app multiple times. (app/no-app error)

To find your problem (auth/invalid-api-key) i'd search through your (production) js bundle and find the line where it initializes the app. Most likely something in your build is messing up the credentials.

[pvdyck]

@kamshak thank you for your answer. My symptoms are the same when I look at the screenshot and the fact that it works perfectly in dev but not in prod (with AOT), so I supposed it was related. I even hardcoded the credentials and the result is the same...

[ValentinFunk]

Have you looked at the JS output manually yet? I'm running it in AOT&prod without a problem, don't think it's angularfire causing it.