title: Angularfire auth guard and angular material not working together
body: <p>I am trying out angularfire and their auth guards. I used their <a href="https://github.com/angular/angularfire/blob/master/docs/auth/router-guards.md" rel="nofollow noreferrer">documentation</a> to learn how to setup my auth guards. And everything seemed perfect, but then I noticed that in my login page angular material input fields aren't responding anymore. And there are no error messages in console.
  If I remove canActivate guard, then angular material input works. What could be the issue here, did I miss some step or I need some additional setup? I created a small demo app to test it and it had the same issue. <a href="https://github.com/ebem/test-app" rel="nofollow noreferrer">demo app in github</a></p>
  
  <p>app-routing.module.ts</p>
  
  <pre><code>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 = () =&gt; redirectLoggedInTo(['dashboard']);
  const redirectUnauthorizedToLogin = () =&gt; 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 { }
  </code></pre>
  
  <p>login.component.html</p>
  
  <pre><code>&lt;div class="login"&gt;
    &lt;mat-form-field appearance="legacy"&gt;
      &lt;mat-label&gt;Legacy form field&lt;/mat-label&gt;
      &lt;input matInput placeholder="Placeholder"&gt;
      &lt;mat-icon matSuffix&gt;sentiment_very_satisfied&lt;/mat-icon&gt;
      &lt;mat-hint&gt;Hint&lt;/mat-hint&gt;
    &lt;/mat-form-field&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/L72PD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L72PD.png" alt="Input is not responding - no borders around, label isn&#39;t at the top"></a></p>
  
  <p>Update: After opening the console I get this warning: <code>Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?</code></p>