Angular/Typescript syntax error?

Question

So right now im writing a login system with angular and firestore, here's my code:

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)
}

However, my console log is telling me, that i miss semicolons, not quite sure why:

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.

and also:

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);

I have obviously no idea what typescript wants to tell me. For example, in the first error, typescript says i need to add an semicolon at line 40, but line 40 is the function googleLogin(){} itself, so not quite sure whats going on here.

If anyone is able to find the misspell / error i would appreciate it. Been sitting on this for now over an hour and simply can't find whats exactly wrong.

Thanks in advance.

For the second error, about the 'return', you have closed the class and you have the next 3 functions outside of the class, you need to move those 3 functions inside the class — Kalamarico
– Kalamarico, Commented Apr 28, 2018 at 16:49

Antoniossss · Accepted Answer · 2018-04-28 16:51:37Z

Here is fixed code

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

Prometheus · Accepted Answer · 2018-04-28 16:54:38Z

So turns out (thanks to Kalamarico and Mirko Acimovic) that i missed a bracket at the bottom. I added it and replaced 1 more at the top. But there was one more problem (See bottom)

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)
}


}

After i added the bracket, my terminal log said:

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

I simply ran npm update in this fixed the issue. App is now working! Thanks everyone!

Collectives™ on Stack Overflow

Angular/Typescript syntax error?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related