Angularfire auth guard и angular материал не работают вместе

Question

Я испытываю angularfire и их охранников. Я использовал их документацию , чтобы узнать, как настроить мои защитные устройства. И все казалось идеальным, но потом я заметил, что на моей странице входа angular поля ввода материала больше не отвечают. И нет никаких сообщений об ошибках в консоли. Если я удаляю canActivate guard, тогда angular ввод материала работает. В чем может быть проблема, я пропустил какой-то шаг или мне нужна дополнительная настройка? Я создал небольшое демо-приложение для тестирования, и у него была та же проблема. демонстрационное приложение в 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 Зонами, поэтому вы и видите эти странные проблемы в Angular Material. Вы можете проверить следующую ссылку на проблему, о которой уже сообщалось в репо Angularfire https://github.com/angular/angularfire/issues/2355

Я добавил ваше репозиторий github и отчет о проблеме, поскольку у меня точно такая же проблема. В качестве обходного пути, вы можете настроить свой собственный auth guard, который должен устранить ошибку на данный момент. Надеюсь, это будет решено в ближайшее время.