Angularfire: AoT didn't work with dotenv

[antonybudianto]

I used dotenv to store firebase config, it worked well on JIT build, but not working on runtime with AoT Build.

So I guess it's not uglify, or webpack define plugin issue, since it's indeed working on normal JIT build

Version info

Angular: 2.4.1

Firebase:

AngularFire: 2.0.0-beta.6

Other (e.g. Ionic/Cordova, Node, browser, operating system):
Node 7.2
npm 4.0.3
macOS Sierra

How to reproduce these conditions

Please clone this and checkout to update-dep
https://github.com/antonybudianto/angular-hackathon-starter

install them

npm install

Create .env (copy from .env.example)
and fill firebase config with your dummy project values.
Also set APP_ENV to production as well

try to build AoT

npm run build

after that, run serve

npm run serve

open localhost:8000, look at console for error traces

---

and try to build with JIT

npm run build:jit

then serve again

npm run serve

it's working as expected

The exporting config file is here

Most likely, it's something to do with this
https://github.com/angular/angularfire2/blob/master/src/angularfire2.ts#L73

Steps to set up and reproduce

Sample data and security rules

• nothing specific needed

Debug output

* Errors in the JavaScript console *

app.49f2378….js:428 TypeError: Cannot read property 'substring' of undefined
    at Object.f [as l] (app.49f2378….js:1279)
    at Object.s [as f] (app.49f2378….js:1279)
    at t.get [as _FirebaseConfig_44] (app.49f2378….js:1332)
    at t.get [as _AngularFire_52] (app.49f2378….js:1332)
    at t.get [as _AuthService_53] (app.49f2378….js:1332)
    at t.getInternal (app.49f2378….js:1332)
    at t.get (app.49f2378….js:520)
    at t.e.injectorGet (app.49f2378….js:548)
    at t.createInternal (app.49f2378….js:1331)
    at t.e.create (app.49f2378….js:548)
    at t.createInternal (app.49f2378….js:1331)
    at t.e.createHostView (app.49f2378….js:548)
    at e.create (app.49f2378….js:478)
    at t.bootstrap (app.49f2378….js:281)
    at app.49f2378….js:281

I also tried to log the config in the angularfire2 code, and it's there until the point it became undefined

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

* Screenshots *

Expected behavior

Should work well with dotenv

Actual behavior

Throwing error at runtime

[davideast]

@antonybudianto Can you try using our next release? It has a fix to work with AOT.

npm install angularfire2@next --save

Let me know if that helps at all 👍

[antonybudianto]

@davideast , have updated, but still same error

[antonybudianto]

@davideast Is it because this factory parameter is not typed? Since other factories have types on their parameters.
https://github.com/angular/angularfire2/blob/master/src/angularfire2.ts#L71

Not really sure, and cannot test it locally (npm link issue)

[davideast]

@antonybudianto It's a runtime error so it shouldn't have anything to do with the typings since all types are stripped at this point. It's also not an AOT error since it's runtime. It may be the case that there's an incompatibility with AOT and dotenv since the error suggests there's no databaseURL specified in the config.

You don't need to npm link to debug locally. You can drop breakpoints and debug with the sourcemaps in the browser.

Can you test your app without using dotenv? If it works with good old fashioned command line flags then I would think that it's a dotenv issue.

[antonybudianto]

Do you mean using hardcoded values for the config?

• Even after using hardcoded values (no dotenv / process.env), still error

By the way, FYI

• it's working well with AOT when it's still angular 2.2.3
• right now, the whole config values are undefined, not only databaseURL

I'm afraid dotenv won't fix this because normal build works.

After some logging into the angularfire2 code, most likely DI issue, the injector return an object with 4 firebase keys with undefined values.

[Splaktar]

I'm not using dotenv in our web app, but I am seeing this when using the Angular CLI with environment.prod.ts. This seems to be a very similar issue to https://github.com/angular/angularfire2/issues/785. We've been seeing this ever since we updated to Angular 2.4.x.

[Splaktar]

Can you try again with @angular/cli beta.31? It seems to have fixed this for https://github.com/angular/angularfire2/issues/785#issuecomment-279184406.

[antonybudianto]

@Splaktar still not working using @ngtools 1.2.9

[davideast]

@antonybudianto Is this still a problem? Should be fixed with that latest CLI.

[antonybudianto]

@davideast I'll update the deps and try it again

[antonybudianto]

I've updated to use latest ngtools and still same error 😞

[davideast]

@antonybudianto A lot has changed. Any luck with new versions?

[antonybudianto]

@davideast still same error, for now I moved from dotenv to normal const export

[chrisjmendez]

I found a solution that simulates the concept behind dotenv but doesn't require it at all. http://www.chrisjmendez.com/2017/05/24/using-dotenv-with-angular/