Firebase с проблемами импорта angular 6?

Я создаю систему регистрации пользователей с помощью Google Firebase, я следую этому руководству:

Система регистрации пользователей

ПРИМЕЧАНИЕ

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

Когда я запускаю свое приложение, у меня возникают следующие ошибки:

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'.

Вот 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 { }

Вот компонент входа в систему, другие компоненты прямо 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() {
  }

}

Я использовал почти все решения для переполнения стека, но ничего не помогло, я собираюсь сдаться, я не вижу хорошей документации по этому поводу, чтобы чайники понимали, что, черт возьми, происходит :(

Что мне нужно изменить, чтобы избавиться от этой ошибки? пожалуйста помоги

какой выпуск firebase вы используете?

Jake11 31.10.2018 13:32

@ Jake11 "firebase": "^ 5.5.6",

The Dead Man 31.10.2018 13:48

поэтому версия, которую они использовали в tut, составляет ~ 3.6.5, вы можете попробовать перейти на более раннюю версию, или попробовать следовать примечаниям к выпуску firebase.google.com/support/release-notes/js, чтобы узнать, куда были перемещены эти классы, или просто поищите в документации, где вы можете найти их версию, которая ты используешь.

Jake11 31.10.2018 13:53

если вы решите перейти на более раннюю версию, я не уверен, но вам, вероятно, придется также понизить версию angularfire2 до более старой версии

Jake11 31.10.2018 13:55

к сожалению, при понижении версии firebase все еще возникают ошибки, и возникает множество других ошибок.

The Dead Man 31.10.2018 14:03
1
5
517
1

Ответы 1

Учебник выпущен 17 января 2017 года, и если вы запустите npm install angularfire2 firebase --save, у вас будет установлена ​​последняя версия firebase, которая не является той, на которой основан учебник, посмотрите здесь похожий пост по этой проблеме

Таким образом, вам нужно понизить версию firebase, которую вы используете для этого проекта, или обновить импорт, чтобы они указывали на правильные файлы, в которых вы можете найти нужные вам классы.

Джейк Я пробовал весь этот соултон, но ничего не помогло :( вот почему мне нужна была помощь

The Dead Man 31.10.2018 13:57

@ user9964622 а какая у вас версия angularfire2?

Jake11 31.10.2018 14:03

"angularfire2": "^ 5.1.0" ,?

The Dead Man 31.10.2018 14:04

@ user9964622 запустите npm remove angularfire2 -> npm install angularfire2@2.0.0-beta.7 --save -> npm remove firebase -> npm install firebase@3.6.5 --save -> перезапустите приложение -> скажите мне, если ошибка все еще возникает

Jake11 31.10.2018 14:14

теперь я получаю эту ошибку: 'subscribe' does not exist on type 'AngularFireAuth'.

The Dead Man 31.10.2018 14:25

обновите весь package.json, чтобы он выглядел так же, как здесь github.com/designcourse/angular-auth-demo/blob/master/…, запустите npm update и перезапустите проект, попробуйте npm install, если npm update не поможет

Jake11 31.10.2018 14:36

Другие вопросы по теме