Firebase with angular 6 imports problems?

Question

I am creating user registration system using google firebase , I am following this tutorial :

User registration system

NOTE

: am using this version "firebase": "^5.5.6",

When I run my app I have the following errors:

ERROR in src/app/login/login.component.ts(2,10): error TS2305: Module '"C:/Users/jelly/projects/profile/node_modules/angularfire2/index"' has no exported member 'AngularFire'.
src/app/login/login.component.ts(3,28): error TS2305: Module '"C:/Users/jelly/projects/profile/node_modules/angularfire2/firestore/index"' has no exported member 'AuthProviders'.
src/app/login/login.component.ts(3,43): error TS2305: Module '"C:/Users/jelly/projects/profile/node_modules/angularfire2/firestore/index"' has no exported member 'AuthMethods'.

Here is app.modul.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UserProfileComponent } from './user-profile/user-profile.component';
import {HttpClientModule} from '@angular/common/http';
import { UserService } from './service/user.service';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { MomentModule } from 'ngx-moment';
import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { LoginComponent } from './login/login.component';
import { EmailComponent } from './email/email.component';
import { SignupComponent } from './signup/signup.component';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireDatabaseModule} from 'angularfire2/database';



const firebaseConfig = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: ''
};


@NgModule({
  declarations: [
    AppComponent,
    UserProfileComponent,
    LoginComponent,
    EmailComponent,
    SignupComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
    BrowserModule,
    MomentModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    AngularFireAuthModule,
    BrowserModule,
    AngularFirestoreModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,
    HttpModule,
    FormsModule,
    HttpClientModule,
    ReactiveFormsModule,
    RouterModule,
    AppRoutingModule,
  ],
  providers: [UserService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here is login component other components right just empyt

import { Component, OnInit } from '@angular/core';
import { AngularFire, } from 'angularfire2';
import { AngularFirestore, AuthProviders, AuthMethods, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  // declare empyt array to hold error data
  error: any;

  constructor(public af: AngularFire, private router: Router) {

  // fucntion to check user authentication
    this.af.auth.subscribe(auth => {
      if (auth) {
        this.router.navigateByUrl('/members');
      }
    });
   }

  // function to login in facebook
  loginFb() {
    this.af.auth.login({
      provider: AuthProviders.Facebook,
      method: AuthMethods.Popup,
    }).then(
      (success) => {
        this.router.navigate(['/members']);
    }).catch(
      (err) => {
        this.error = this.error;
      });
  }

    // function to login with google
    loginGoogle() {
      this.af.auth.login({
        provider: AuthProviders.Facebook,
        method: AuthMethods.Popup,
      }).then(
        (success) => {
          this.router.navigate(['/members']);
      }).catch(
        (err) => {
          this.error = this.error;
        });
    }

  ngOnInit() {
  }

}

I have used almost all solution in stack overflow but nothing worked , I am about to give up now , I dont see any good documentation on this for dummies to understand what the hell is going on :(

What do I need to change to get rid of this error?? please help

Answer 1

Tutorial is from Jan 17, 2017 and if you run npm install angularfire2 firebase --save you will have latest version of firebase installed, which is not the one tutorial is based on, look here is similar post on this problem

So you have to etiher downgrade firebase version, which you use for this project or upgrade imports so their point to right files, in which you can find classes you need