angularfire 2: Error “Unhandled Promise rejection: TypeError: Cannot read property”

Question

I tried an example app to connect to Firebase

In my Main.ts I wrote this:

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppComponent, environment } from './app/';
import { FIREBASE_PROVIDERS, defaultFirebase, firebaseAuthConfig, AuthProviders, AuthMethods } from 'angularfire2';

if (environment.production) {
  enableProdMode();
}

bootstrap(AppComponent,[
  FIREBASE_PROVIDERS,
  defaultFirebase({
    apiKey: "MYKEY",
    authDomain: "MYDOMAIN.firebaseapp.com",
    databaseURL: "https://MYDOMAN.firebaseio.com",
    storageBucket: "MYDOMAIN.appspot.com",
  }),
  firebaseAuthConfig({
    provider: AuthProviders.Password,
    method: AuthMethods.Popup
  })
]);

EDIT: here is the component.ts

import { Component } from '@angular/core';
import { LoginComponent } from './login/'

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [ LoginComponent ]
})
export class AppComponent {
  title = 'Please Login to the App';
}

But when is start my App with "ng serve" and call the URL , I get an error called:

zone.js:461 Unhandled Promise rejection: TypeError: Cannot read property 'FacebookAuthProvider' of undefined at Object.eval (http://localhost:4200/vendor/angularfire2/providers/firebase_sdk_auth_backend.js:24:43) at eval (http://localhost:4200/vendor/angularfire2/providers/firebase_sdk_auth_backend.js:108:4) at eval (http://localhost:4200/vendor/angularfire2/providers/firebase_sdk_auth_backend.js:109:3) at Object.eval (http://localhost:4200/vendor/angularfire2/angularfire2.js:33:35) Evaluating http://localhost:4200/vendor/angularfire2/providers/firebase_sdk_auth_backend.js Evaluating http://localhost:4200/vendor/angularfire2/angularfire2.js Evaluating http://localhost:4200/app/login/login.component.js Evaluating http://localhost:4200/app/login/index.js Evaluating http://localhost:4200/app/app.component.js Evaluating http://localhost:4200/app/index.js Evaluating http://localhost:4200/main.js Error loading http://localhost:4200/main.js ; Zone: ; Task: Promise.then ; Value: Error: TypeError: Cannot read property 'FacebookAuthProvider' of undefined(…)

Any ideas?

Answer 1

Based on the comments, it appears that this error occurs when using the Firebase 2.x SDK instead of the Firebase 3.x SDK which is required by AngularFire2.