AuthGuard prevents Angular Material from loading fully - angular-material

Question

I am working on adding an AuthGuard to my Ionic 4 project. The guard checks if the user is logged in, if true the user continues to the home page, if false the user is redirected to the login page. The problem is when the user is redirected to the login page because of the guard the Angular Material label does not work correct. When the login page is visited without involving the guard everything works correctly.
AuthGuard service:
import { Injectable } from '#angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot } from '#angular/router';
import { UserService } from './user.service';
import { AngularFireAuth } from '#angular/fire/auth';
import { auth } from 'firebase/app';
#Injectable({
providedIn: 'root'
})
export class AuthService implements CanActivate {
constructor(
private router: Router,
public afAuth: AngularFireAuth,
private user: UserService) {
}
canActivate(route: ActivatedRouteSnapshot): Promise<boolean> {
return new Promise((resolve, reject) => {
this.afAuth.auth.onAuthStateChanged(user => {
if (user) {
// User is signed in.
resolve(true);
} else {
// No user is signed in.
resolve(false);
this.router.navigate(['login']);
}
});
});
}
}
login.page.html
<ion-content>
<div class="blue-background">
<img src="assets/logo.png" width="33%" height="18.6%" style="display: block; margin-left: auto; margin-right: auto;"/>
</div>
<div class="form_wrapper">
<div class="form_container">
<div class="row clearfix">
<div class="">
<mat-form-field appearance="outline" style="height: 40px; margin-bottom: 1.5em;">
<mat-label>Email</mat-label>
<input matInput style="min-height: 40px;" type="email" [(ngModel)]="username">
</mat-form-field>
<mat-form-field appearance="outline" style="height: 40px; margin-bottom: 1.5em;">
<mat-label>Password</mat-label>
<input matInput style="min-height: 40px;" type="password" [(ngModel)]="password">
</mat-form-field>
<ion-button style="margin-top: 10px; float: right; overflow: auto" fill="clear" size="small" color="dark" (click)="goToForgotPassword()">Forgot password?</ion-button>
<ion-button style="clear: both; overflow: auto" fill="solid" expand="block" color="dark" (click)="login()">Login</ion-button>
</div>
</div>
</div>
</div>
</ion-content>
Image of how the fields should work.
Image of how the fields work after the AuthGuard redirect. Notice the labels don't float.