CODEWITHSUNDEEP
angulartypescriptfirebaseangularfire
Raul Sanchez
Raul Sanchez

Reputation: 2019

Angular 4 + Firebase2 Authentication

I've ran into trouble trying to learn to authenticate user using angular + firebase.

I am getting this ERROR message when running the angular app via ng serve in terminal.

ERROR in /Users/.../Desktop/angular/fireauth/node_modules/angularfire2/angularfire2.d.ts (2,10): Module '"/Users/.../Desktop/angular/fireauth/node_modules/@angular/core/index"' has no exported member 'InjectionToken'.

ERROR in /Users/.../Desktop/angular/fireauth/node_modules/angularfire2/firebase.app.module.d.ts (1,10): Module '"/Users/.../Desktop/angular/fireauth/node_modules/@angular/core/index"' has no exported member 'InjectionToken'.

Upvotes: 0

Views: 685

Answers (1)

James
James

Reputation: 73

I was getting the same error. For me, I had a typo in one of my files that was trying importing from angularFire2/... instead of angularfire2/... Causing the error to happen.

Here's an example of a basic angular firestore set up.

Install angularfire2 and firebase

npm install firebase angularfire2 --save

environments/environment.ts

export const environment = {
  production: false,
  firebase: { // add your api stuff here
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>'
  }
}

app.module.ts

The imports along with whatever else you import

// Firebase Modules
import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { AngularFireAuthModule } from 'angularfire2/auth';
// Auth Service
import { AuthService } from './services/auth.service';
// Environment with firebase api key
import { environment } from './../environments/environment';

Module Imports & Providers Arrays

imports: [
  BrowserModule,
  AngularFireModule.initializeApp(environment.firebase),
  AngularFirestoreModule.enablePersistence(),
  AngularFireAuthModule,
  RouterModule.forRoot(appRoutes)
]
providers: [
  AuthService,
]

Your Firestore Auth Service

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { User } from './../../models/user.interface';
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';

@Injectable()
export class AuthService {

  constructor (
    private afAuth: AngularFireAuth,
    private afs: AngularFirestore,
    private router: Router
  ) { }
  // Your authentication logic here.
}

Last but not least, make sure you have your read write rules set up properly in firebase console. And enable one or more of the login services from the firebase console.

From console.firebase.google.com/project stuff/database/firestore/rules

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

After that just import your auth service and pass it into the component constructor wherever you need to use the auth service.

When I got that same error, it was because of an error in importing things from angualrFire2. It also threw an error while running ng serve that said the app had multiple modules that varied only in case. Meaning I was trying to import from angularfire2/... and angularFire2/... Hopefully you find your error.

Just a quick note You can also write a generic firestore service that handles all your crud operations for your app in a similar manor to how we created our custom auth service.

Upvotes: 1

Related Questions