Is there a syntax issue in your Angular/Typescript code?

Question

Is there a syntax issue in your Angular/Typescript code?

I am currently developing a login system using Angular and Firestore, and here is the code I have written:

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, when checking my console log, it indicates that I am missing semicolons. I'm not exactly 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.

Additionally, I encountered this error:

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 am confused about what TypeScript is trying to communicate. For instance, TypeScript suggests adding a semicolon at line 40 where the googleLogin() function is defined, which seems odd to me.

If anyone can help identify the spelling mistake or error, I would greatly appreciate it. I've spent over an hour troubleshooting this issue and haven't been able to pinpoint the exact problem.

Thank you in advance.

angular typescript

Answer 1

Answer №1

Check out the updated code below:

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

Click here for live demo

Answer 2

Check out the updated code below:

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

Click here for live demo

Answer 3

Answer №2

After receiving help from Kalamarico and Mirko Acimovic, I realized that I had missed a bracket at the bottom of my code. By adding it and replacing another one at the top, I thought all issues were resolved. However, there was still one more problem (refer to the bottom for details).

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


}

Upon fixing the bracket issue, my terminal displayed the following error:

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

To resolve this, I simply ran npm update which successfully fixed the issue. The application is now functioning properly! Grateful for the assistance received!

Answer 4

After receiving help from Kalamarico and Mirko Acimovic, I realized that I had missed a bracket at the bottom of my code. By adding it and replacing another one at the top, I thought all issues were resolved. However, there was still one more problem (refer to the bottom for details).

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


}

Upon fixing the bracket issue, my terminal displayed the following error:

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

To resolve this, I simply ran npm update which successfully fixed the issue. The application is now functioning properly! Grateful for the assistance received!

Is there a syntax issue in your Angular/Typescript code?

Answer №1

Answer №2

Similar questions

Combining the Partial<CssStyleDeclaration> union type with a dictionary can lead to potential typing complications when the implicit any flag is

React-bootstrap-table Axios delete operation causing [object%20Object] to be displayed in the browser console

Implementing Formik in React for automatic updates to a Material-UI TextField when blurred

Unexpected Typescript error when React component receives props

Tips for effectively utilizing typescript interface with the OR operator

Ways to store a component in cache once its route is triggered

Angular 7 SPA encountering Media Type Not Supported 415 issue when communicating with .NET, despite successful request in Postman

The function has been called but it did not return a

Retrieve the encrypted URL

Implementing automatic selection for MUI toggle buttons with dynamic data

Navigating through Angular2 notifications using router chaining

Retrieve information from a URL to transmit to a different page in NextJS using Typescript and AppRouter

The presence of an Angular Element within an Angular application can lead to a problematic cycle of constant reloading,

What could be causing jQuery to overlook this button?

React - Ensure useEffect is triggered only after state update

Retrieve all the items listed in the markdown file under specific headings

Basic cordova application that transfers data from one page to another using typescript

Steps for reinstalling TypeScript

Can Angular Universal be configured to have all HTTP Requests originate from the Server instead of the Client's Browser in an Angular Application?

Retrieve the values stored under the "kilos" key for every object in the dataset