Question

所以现在我正在用angular和firestore编写一个登录系统，这是我的代码：

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

import * as firebase from 'firebase/app';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFirestore, AngularFirestoreDocument } from 'angularfire2/firestore';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/switchMap';


interface User {
  uid: string;
  email: string;
  photoURL?: string;
  displayName?: string;
  favouriteColor?: string;
}

@Injectable()
export class AuthService {

  user: Observable<User>;

  constructor(private afAuth: AngularFireAuth,
              private afs: AngularFirestore,
              private router: Router) {
                this.user = this.afAuth.authState
                  .switchMap(user => {
                    if(user) {
                      return this.afs.doc<User>(`users/${user.uid}`).valueChanges()
                    } else {
                      return Observable.of(null)
                    }
                  })
               }

}

googleLogin(){
  const provider = new firebase.auth.GoogleAuthProvider()
  return this.oAuthLogin(provider);
}


private oAuthLogin(provider){
  return this.afAuth.auth.signInWithPopup(provider)
    .then((credential) => {
      this.updateUserData(credential.user)
    })
}

private updateUserData(user){
  const userRef: AngularFirestoreDocument<User> = this.afs.doc(`users/${user.id}`)

  const data: User = {
    uid: user.uid,
    email: user.email,
    displayName: user.displayName,
    photoURL: user.photoURL
  }

  return userRef.set(data)
}

然而，我的控制台日志告诉我，我错过了分号，不太确定原因：

ERROR in src/app/core/auth.service.ts(40,14): error TS1005: ';' expected.
src/app/core/auth.service.ts(46,1): error TS1128: Declaration or statement expected.
src/app/core/auth.service.ts(46,29): error TS1005: ';' expected.
src/app/core/auth.service.ts(53,1): error TS1128: Declaration or statement expected.
src/app/core/auth.service.ts(53,29): error TS1005: ';' expected.

还有：

ERROR in ./src/app/core/auth.service.ts
Module parse failed: 'return' outside of function (48:4)
You may need an appropriate loader to handle this file type.
| {
|     var provider = new firebase.auth.GoogleAuthProvider();
|     return this.oAuthLogin(provider);
| }
| oAuthLogin(provider);

我显然不知道打字稿要告诉我什么。例如，在第一个错误中，typescript表示我需要在第40行添加分号，但第40行是函数googleLogin（）{}本身，所以不太清楚这里是什么。

如果有人能够找到拼写错误/错误，我会很感激。现在坐了一个多小时，根本找不到什么错误。

提前致谢。

Answer 1

这是固定代码

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

import * as firebase from 'firebase/app';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFirestore, AngularFirestoreDocument } from 'angularfire2/firestore';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/switchMap';


interface User {
  uid: string;
  email: string;
  photoURL?: string;
  displayName?: string;
  favouriteColor?: string;
}

@Injectable()
export class AuthService {

  user: Observable<User>;

  constructor(private afAuth: AngularFireAuth,
              private afs: AngularFirestore,
              private router: Router) {
                this.user = this.afAuth.authState
                  .switchMap(user => {
                    if(user) {
                      return this.afs.doc<User>(`users/${user.uid}`).valueChanges()
                    } else {
                      return Observable.of(null)
                    }
                  })
               }

// HERE U HAD BRACKET THAT DIDNT SUPPOSED TO BE HERE - it ended class

googleLogin(){
  const provider = new firebase.auth.GoogleAuthProvider()
  return this.oAuthLogin(provider);
}


private oAuthLogin(provider){
  return this.afAuth.auth.signInWithPopup(provider)
    .then((credential) => {
      this.updateUserData(credential.user)
    })
}

private updateUserData(user){
  const userRef: AngularFirestoreDocument<User> = this.afs.doc(`users/${user.id}`)

  const data: User = {
    uid: user.uid,
    email: user.email,
    displayName: user.displayName,
    photoURL: user.photoURL
  }

  return userRef.set(data)
}
} // This bracked you miss

https://stackblitz.com/edit/angular-jjqmlv

Answer 2

事实证明（感谢Kalamarico和Mirko Acimovic）我错过了底部的支架。我添加了它，并在顶部更换了1个。但还有一个问题（见下）

Show Modal Dialog

我添加了支架后，我的终端日志说：

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

import * as firebase from 'firebase/app';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFirestore, AngularFirestoreDocument } from 'angularfire2/firestore';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/switchMap';


interface User {
  uid: string;
  email: string;
  photoURL?: string;
  displayName?: string;
  favouriteColor?: string;
}

@Injectable()
export class AuthService {

  user: Observable<User>;

  constructor(private afAuth: AngularFireAuth,
              private afs: AngularFirestore,
              private router: Router) {
                this.user = this.afAuth.authState
                  .switchMap(user => {
                    if(user) {
                      return this.afs.doc<User>(`users/${user.uid}`).valueChanges()
                    } else {
                      return Observable.of(null)
                    }
                  })

                }


googleLogin(){
  const provider = new firebase.auth.GoogleAuthProvider()
  return this.oAuthLogin(provider);
}


private oAuthLogin(provider){
  return this.afAuth.auth.signInWithPopup(provider)
    .then((credential) => {
      this.updateUserData(credential.user)
    })
}

private updateUserData(user){
  const userRef: AngularFirestoreDocument<User> = this.afs.doc(`users/${user.id}`)

  const data: User = {
    uid: user.uid,
    email: user.email,
    displayName: user.displayName,
    photoURL: user.photoURL
  }

  return userRef.set(data)
}


}

我只是简单地运行ERROR in node_modules/angularfire2/firebase.app.module.d.ts(10,22): error TS2420: Class 'FirebaseApp' incorrectly implements interface 'FirebaseApp'. Property 'automaticDataCollectionEnabled' is missing in type 'FirebaseApp'.来修复此问题。应用程序正在运行！谢谢大家！

Angular / Typescript语法错误？

2 个答案: