title: No provider for InjectionToken angularfire2.app.options
body: <p>Recently I started to learn to use the concept of firebase in combination with angular. As a start, I try to make the login process work. Currently, I get an ennoying error when I try to navigate to the login page and I cannot figure out what is causing the error. The error I get is:</p>
  
  <blockquote>
    <p>ERROR Error: Uncaught (in promise): Error:
    StaticInjectorError(AppModule)[AngularFireAuth -> InjectionToken
    angularfire2.app.options]:    StaticInjectorError(Platform:
    core)[AngularFireAuth -> InjectionToken angularfire2.app.options]: 
        NullInjectorError: No provider for InjectionToken angularfire2.app.options!</p>
  </blockquote>
  
  <p>What do I have to do resolve this error? Also, I see a lot of code using angularfire2 instead of @angular/fire. What is the difference between these 2 and which should I actually use?</p>
  
  <p>this is the code I have so far:</p>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { RouterModule } from '@angular/router';
  import { AngularFireModule } from '@angular/fire';
  import { AngularFireDatabaseModule } from '@angular/fire/database';
  import { environment } from 'environments/environment';
  import * as firebase from 'firebase/app';
  
  import { AppComponent } from './app.component';
  import { FIREBASE_SERVICES } from './core/firebase/services';
  import { AUTHENTICATION_GUARDS } from './features/authentication/guards';
  import { AUTHENTICATON_ROUTES } from './features/authentication/authentication.route';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { AngularFireAuthModule } from '@angular/fire/auth';
  import { DashboardComponent } from './features/dashboard/dashboard/dashboard.component';
  import { LogInComponent } from './features/authentication/login/login.component';
  import { DASHBOARD_ROUTES } from './features/dashboard/dashboard.route';
  
  firebase.initializeApp(environment.firebase);
  
  @NgModule({
      declarations: [
          AppComponent,
          DashboardComponent,
          LogInComponent
      ],
      imports: [
          AngularFireModule,
          AngularFireDatabaseModule,
          AngularFireAuthModule,
          BrowserModule,
          RouterModule,
          FormsModule, 
          ReactiveFormsModule,
          RouterModule.forRoot(AUTHENTICATON_ROUTES),
          RouterModule.forRoot(DASHBOARD_ROUTES)
      ],
      providers: [
          FIREBASE_SERVICES, 
          AUTHENTICATION_GUARDS
      ],
      bootstrap: [AppComponent]
  })
  export class AppModule {
      constructor() {
          console.log("App module created");
      }
  }
  </code></pre>
  
  <p><strong>login.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Credentials } from '@app/core/firebase/models';
  import { AuthenticationService } from '@app/core/firebase/services/authentication.service';
  import { Router } from '@angular/router';
  
  @Component({
      selector: 'app-log-in',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.less']
  })
  export class LogInComponent {
      emailaddress: string = '';
      password: string = ''; 
  
      constructor(private readonly _authenticationService: AuthenticationService,
          private readonly _router: Router) {
      }
  
      login() {
          console.log('log in clicked');
  
          const credentials = new Credentials(this.emailaddress, this.password);
  
          this._authenticationService.login(credentials)
              .then(
                  () =&gt; this._router.navigate['/dashboard'],
                  error =&gt; {
                      console.log(error);
                      alert(error.message);
                  }
              );
      }
  }
  </code></pre>
  
  <p><strong>authentication.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { isNullOrUndefined } from 'util';
  import { AngularFireAuth } from '@angular/fire/auth';
  import * as firebase from 'firebase/app';
  
  import { Credentials } from '@app/core/firebase/models';
  
  @Injectable()
  export class AuthenticationService {
  
      constructor(private readonly _angularFireAuthentication: AngularFireAuth) {
          console.log("Authentication Service created");
      }
  
      login(credentials: Credentials) {
          return new Promise((resolve, reject) =&gt; {
              this._angularFireAuthentication.auth
                  .signInWithEmailAndPassword(credentials.emailaddress, credentials.password)
                  .then(
                      result =&gt; resolve(result),
                      error =&gt; reject(error)
                  );
          });
      }
  
      logout() {
          return new Promise((resolve, reject) =&gt; {
              if (this.isUserLoggedIn()) {
                  this._angularFireAuthentication.auth.signOut();
                  resolve();
              }
              else {
                  reject();
              }
          });
      }
  
      private isUserLoggedIn(): boolean {
          return !isNullOrUndefined(firebase.auth().currentUser);
      }
  }
  </code></pre>
  
  <p><strong>dependencies section in pacakge.json</strong></p>
  
  <pre><code>"dependencies": {
      "@angular/animations": "~7.1.0",
      "@angular/common": "~7.1.0",
      "@angular/compiler": "~7.1.0",
      "@angular/core": "~7.1.0",
      "@angular/forms": "~7.1.0",
      "@angular/platform-browser": "~7.1.0",
      "@angular/platform-browser-dynamic": "~7.1.0",
      "@angular/router": "~7.1.0",
      "core-js": "^2.5.4",
      "rxjs": "~6.3.3",
      "tslib": "^1.9.0",
      "zone.js": "~0.8.26",
      "firebase": "^5.5.5",
      "@angular/fire": "^5.0.2"
    },
  </code></pre>