Question

我尝试使用angularfirebase.com上的自定义Firestore用户数据教程进行Firebase OAuth登录，但我遇到了错误。

在core.module中，我有提供程序：[AuthService] ，我尝试将组件的构造函数本身放在同一个错误中。

    AppComponent.html:15 ERROR Error: No provider for Router!
    at injectionError (core.es5.js:1169)
    at noProviderError (core.es5.js:1207)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (core.es5.js:2649)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (core.es5.js:2688)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKey (core.es5.js:2620)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489)
    at resolveNgModuleDep (core.es5.js:9492)
    at _createClass (core.es5.js:9533)
    at _createProviderInstance$1 (core.es5.js:9503)
    at resolveNgModuleDep (core.es5.js:9488)
View_AppComponent_0 @   AppComponent.html:15

在第15行的app.component中我有：

<app-user-profile></app-user-profile>

这是我的用户个人资料html：

    <div *ngIf="auth.user | async; then authenticated else guest">
    <!-- template will replace this div -->
</div>


<!-- NOT logged in -->
<ng-template #guest>
<p>Login to get started...</p>

<button (click)="auth.googleLogin()">
    <i class="fa fa-google"></i> Connect Google
</button>

</ng-template>


<!-- Logged in -->
<ng-template #authenticated>
<div *ngIf="auth.user | async as user">
    <h3>Name: {{ user.displayName }}</h3>
</div>
</ng-template>

用户profile.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../core/auth.service';
@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.css']
})
export class UserProfileComponent implements OnInit {

  constructor(public auth: AuthService) { }

  ngOnInit() {
  }

}

这是我的auth.service.ts

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;
  favoriteColor?: 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<any> = this.afs.doc(`users/${user.uid}`);

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

    return userRef.set(data)

  }



}

我在app.module.ts中导入 RouterModule

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { RouterModule } from '@angular/router';
import { AngularFireAuthModule } from 'angularfire2/auth';

import { CoreModule } from './core/core.module';


import { environment } from '../environments/environment';


import { AppComponent } from './app.component';
import { HeaderComponent } from './layout/header/header.component';
import { MenuComponent } from './layout/menu/menu.component';
import { FooterComponent } from './layout/footer/footer.component';
import { UserProfileComponent } from './user-profile/user-profile.component';


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    MenuComponent,
    FooterComponent,
    UserProfileComponent
  ],
  imports: [
    BrowserModule,
    RouterModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    AngularFireAuthModule,
    CoreModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore'
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';



@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {



  constructor(){

  }

  ngOnInit(){


  }



}

Answer 1

您必须在应用程序的根目录中导入with payment as (select company_id , min(start_on) starts_o , date_part('day', max(end_on) :: timestamp - min(start_on) :: TIMestamp) start_to_end , max(end_on) ends_o , date_part('day', max(paied_att) :: timestamp - max(end_on) :: TIMestamp) ends_to_paid , max(paied_att) paid_at , date_part('day', current_date :: timestamp - max(paied_att) :: timestamp) paid_now , sum(EE_per_payment) contribution_count , sum(amount) amount from ( select p.id , company_id , count(distinct employee_id) EE_per_payment , min(c.starts_on) start_on , max(c.ends_on) end_on , date(p.paid_at) paied_att , (amount_pennies) / 100.00 amount , sum(employee_amount_pennies + company_amount_pennies + voluntary_amount_pennies) / 100.00 contribution from payments p left join contributions c on p.id = c.payment_id where c.state = 'invested' and p.state = 'paid_out' group by p.id, p.company_id order by company_id asc) o group by company_id) select p.* , round((p.amount / (p.start_to_end / 30)) :: numeric, 2) avr_per_month , round(((p.amount / (p.start_to_end / 30)) * (paid_now / 30)) :: numeric, 2) outstanding from payment p where paid_now >= 90 and amount > 0;。

RouterModule.forRoot([])

Live demo

Answer 2

您说您在提供商中包含了AuthService，但在您的示例中它似乎是空的？

  imports: [
    BrowserModule,
    RouterModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    AngularFireAuthModule,
    CoreModule

  ],
  providers: [], <----- put the AuthService there
  bootstrap: [AppComponent]
})
export class AppModule { }

编辑：对不起，我刚看到评论。有时我遇到类似的问题，当我仍然运行我的应用程序的运行实例时，无法识别某些服务。有时它会帮助关闭它并重新构建它。

另外，它抱怨找不到路由器？也许你应该添加这样的导入......

imports: [
    ...
    ...
    RouterModule.forRoot([
      { path: 'login', component: LoginComponent },
      { path: 'no-access', component: NoAccessComponent }
    ]),

错误错误：没有路由器的提供商！ Angular4

2 个答案: