AngularFire2 initializing app gives error

Question

I am trying to initialize AngularFire2 in my Angular2 application, but I am getting the following error.

ERROR in ./src/app/firebase/index.ts
Module build failed: Error: /Users/jaruesink/Documents/Projects/buckets/src/app/firebase/index.ts (16,17): Return type of exported function has or is using name 'ModuleWithProviders' from external module "/Users/jaruesink/Documents/Projects/buckets/node_modules/@angular/core/src/metadata/ng_module" but cannot be named.)
    at _checkDiagnostics (/Users/jaruesink/Documents/Projects/buckets/node_modules/@ngtools/webpack/src/loader.js:115:15)
    at /Users/jaruesink/Documents/Projects/buckets/node_modules/@ngtools/webpack/src/loader.js:140:17
 @ ./src/app/app.module.ts 15:0-48
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

Here is my Firebase module that I am trying to import as initializeFirebase() in my NgModule.

import { AngularFireModule, AuthProviders, AuthMethods } from 'angularfire2';

export const firebaseConfig = {
  FIREBASE STUFF GOES HERE
};

export const firebaseAuthConfig = {
  provider: AuthProviders.Facebook,
  method: AuthMethods.Redirect
}

export function initializeFirebase() {
  return AngularFireModule.initializeApp(firebaseConfig, firebaseAuthConfig);
}

Can someone help explain what I am doing wrong, or if something else is going on, is there a way I can work around it?

Thanks!

Answer 1

The reason it does not work when placed in the external file has to do with this function:

export function initializeFirebase() {
  return AngularFireModule.initializeApp(firebaseConfig, firebaseAuthConfig);
}

The declaration does not specify a return type, so it's inferred to be ModuleWithProviders - the return type of initializeApp (and the type that's mentioned in the error).

To solve the problem, you can specify the return type, which will also mean you need to add an import:

import { ModuleWithProviders } from '@angular/core';
...
export function initializeFirebase(): ModuleWithProviders {
  return AngularFireModule.initializeApp(firebaseConfig, firebaseAuthConfig);
}

For more information, see this GitHub issue comment

Answer 2

I placed all the config stuff into the same file as the NgModule and then it worked... I had separated it like this before and it worked, but I guess not this time.