Angular 4 + Firebase2身份验证

时间:2017-10-03 02:23:11

标签: angular typescript firebase angularfire

我在尝试使用angular + firebase来验证用户身份时遇到了麻烦。

在终端中通过 ng serve 运行角度应用时,我收到此错误消息。

  

错误   /Users/.../Desktop/angular/fireauth/node_modules/angularfire2/angularfire2.d.ts   (2,10):模块   '" /用户/.../桌面/角度/ fireauth / node_modules / @角/型芯/索引"'   没有导出的成员' InjectionToken'。

     

错误   /Users/.../Desktop/angular/fireauth/node_modules/angularfire2/firebase.app.module.d.ts   (1,10):模块   '" /用户/.../桌面/角度/ fireauth / node_modules / @角/型芯/索引"'   没有导出的成员' InjectionToken'。

1 个答案:

答案 0 :(得分:1)

我得到了同样的错误。对我来说,我的一个文件中有一个拼写错误,正在尝试从angularFire2/...导入,而不是angularfire2/...导致错误发生。

这是一个基本角度火场的设置示例。

安装angularfire2和firebase

npm install firebase angularfire2 --save

环境/ 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

导入以及您导入的任何其他内容

// 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';

模块进口&amp;提供者阵列

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

您的Firestore验证服务

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

最后但同样重要的是,请确保在firebase控制台中正确设置了读写规则。并从firebase控制台启用一个或多个登录服务。

来自console.firebase.google.com/project stuff / database / firestore / rules

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

之后只需导入您的auth服务并将其传递到组件构造函数中,无论您需要使用auth服务。

当我得到同样的错误时,是因为从angualrFire2导入内容时出错。在运行ng服务时它也会抛出一个错误,表示应用程序有多个模块,只有在不同情况下才有变化。意思是我试图从angularfire2 / ...和angularFire2 / ...导入...希望你找到你的错误。

快速说明您还可以编写一个通用的firestore服务,以类似于我们创建自定义身份验证服务的方式处理您应用的所有crud操作。