Issues with angularfire2 (Angular + Firebase integration) and devserver

[pshields]

Hey Alex, I have been having trouble adding the angularfire2 package (Google-maintained, Firebase-related Angular modules) as a dependency to my app and getting it to serve from the devserver correctly.

I thought the basic steps would be to add the relevant *.umd.js files to the scripts argument of ts_devserver, but that appears to cause the following requirejs error: Uncaught Error: Mismatched anonymous define() module: function (exports,_angular_core,firebase,rxjs_scheduler_queue) { 'use strict';.

I'm not really sure what I need to be doing to troubleshoot this. Do you have any advice? I'm not sure if the issue is with my code, or with the devserver, or with the angularfire2 package.

I've created a repro at #55.

[alexeagle]

The issue here is inside the UMD bundle you get from firebase. They use an anonymous define() - what this means is that the bundle doesn't know its own name. So the only way to resolve an import statement from angularfire2 in the browser is to fetch it from a URL, because in this case the name of the module is known from the URL (or from a mapping manually given to the module loader)

More broadly, the issue is that the module loading in ts_devserver works for TS code built by bazel, but not for externally built code.

One option is what @thelgevold published on http://www.syntaxsuccess.com/viewarticle/angular-bazel-build-with-dev-server - using SystemJS as the loader for these external bundles, while require.js is the loader for the bazel-built bundles. He could probably help out here since he's a core contributor to ABC.

Another option, well worth considering in this case, is for AngularFire to ship with BUILD files. If you had a source dependency on it, then you'd get the JS transpiled with the ts_library rule, then it's just a bazel-to-bazel dependency and require.js is a sufficient loader. That's how rxjs is handled in this example repo.

It's tracked in bazelbuild/rules_typescript#126

/cc @IgorMinar has been working on improving the integration with firebase, fixing some unrelated runtime issues with zones.

[pshields]

Thanks Alex. I've logged a feature request with Firebase and will see if I can figure out an alternative way to load the module in the devserver (such as using SystemJS) in the meantime.

[alexeagle]

Link to the firebase issue?

[pshields]

I originally filed it through https://firebase.google.com/support/, which doesn't appear to be globally linkable. I'll log another one at https://github.com/angular/angularfire2 and link to it shortly.

Edit: angular/angularfire#1431

[alexeagle]

Let's use that firebase issue to track, as well as https://github.com/bazelbuild/rules_typescript/issues/103 for general issues with serving third-party libs.