Angularfire Auth Guard和角度材料无法一起使用

Question

我正在尝试angularfire及其授权警卫。我使用他们的documentation了解如何设置我的身份验证防护。一切似乎都很完美，但是随后我注意到在我的登录页面中，角度材料输入字段不再响应。并且控制台中没有错误消息。如果删除canActivate防护，则角材料输入有效。这可能是问题所在，我错过了一些步骤还是需要其他设置？我创建了一个小型演示应用程序来对其进行测试，但它存在相同的问题。 demo app in github

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {LoginComponent} from './login/login.component';
import {canActivate, redirectLoggedInTo, redirectUnauthorizedTo} from '@angular/fire/auth-guard';
import {DashboardComponent} from './dashboard/dashboard.component';

const redirectLoggedInToDashboard = () => redirectLoggedInTo(['dashboard']);
const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['login']);


const routes: Routes = [
  {path: '', redirectTo: 'login', pathMatch: 'full'},
  {path: 'login', component: LoginComponent, ...canActivate(redirectLoggedInToDashboard)},
  {path: 'dashboard', component: DashboardComponent, ...canActivate(redirectUnauthorizedToLogin)},
  {path: '**', redirectTo: 'login'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

login.component.html

<div class="login">
  <mat-form-field appearance="legacy">
    <mat-label>Legacy form field</mat-label>
    <input matInput placeholder="Placeholder">
    <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
    <mat-hint>Hint</mat-hint>
  </mat-form-field>
</div>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { AngularFireModule } from '@angular/fire';
import {environment} from '../environments/environment';
import {AngularFirestoreModule} from '@angular/fire/firestore';
import {AngularFireAnalyticsModule} from '@angular/fire/analytics';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {AngularFireAuthGuardModule} from '@angular/fire/auth-guard';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatIconModule} from '@angular/material/icon';
import {MatInputModule} from '@angular/material/input';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,

  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    AngularFireAnalyticsModule,
    BrowserAnimationsModule,
    AngularFireAuthGuardModule,
    MatFormFieldModule,
    MatIconModule,
    MatInputModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

更新：打开控制台后，我收到此警告：Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?

Answer 1

您的设置正确。但是，Angularfireguard当前存在一个干扰Angular Zones的问题，因此这就是为什么您在Angular Material中看到这个奇怪的问题。您可以检查以下链接，以查看已在Angularfire存储库https://github.com/angular/angularfire/issues/2355]中报告的问题。

我在这里添加了您的github存储库并发布了报告，因为我遇到了同样的问题。解决方法是，您可以设置自己的自定义身份验证保护程序，暂时可以解决该错误。希望这会尽快解决。