Amplify Angular Auth Material Icons Not Rendering On Component Activation

Question

I'm trying to use Amplify Angular UI Auth component however when I navigate via route to activate my next component "/home" from the Amplify Auth component my Angular Material Icons are displaying text instead of the icon. However, once on the component, if I refresh the /home page, the icon appears. If i activate the route by navigating directly to it. So for example I go directly to /home the icon also displays. Its only when I'm navigating from the amplify ui component the text displays.

So in a nutshell I'm simply authenticating using the amplify ui component, and from that component I'm routing to the /home component.

Here is my setup:

app-routing-module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AuthComponent } from './auth/auth.component';


const routes: Routes = [{
  path: "home",
  component: HomeComponent,
},
{
  path: "login",
  component: AuthComponent
},
{
  path: '**',
  redirectTo: 'login',
  pathMatch: 'full'
}
];

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

auth.component.html

<amplify-authenticator>
    <amplify-sign-up slot="sign-up" usernameAlias="email" ></amplify-sign-up>
</amplify-authenticator>

auth.component.ts - This is where I user route after successful login

import { Component, OnInit } from '@angular/core';
import { AmplifyService } from 'aws-amplify-angular';
import { Router } from '@angular/router';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.css']
})
export class AuthComponent implements OnInit {

  constructor(public amplifyService: AmplifyService, public router: Router) {

    this.amplifyService = amplifyService;

    this.amplifyService.authStateChange$
      .subscribe(authState => {
        console.log("Signed IN ");
        if (authState.state === 'signedIn') {
          console.log("Navigating to home");

          this.router.navigate(['/home']);
        }
      });

  }
  ngOnInit(): void {
  }
}

home.component.html - Where I am displaying a mat icon

<p>home works!</p>
<mat-icon aria-hidden="false">home</mat-icon>

app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { AmplifyService } from 'aws-amplify-angular'


/* Add Amplify imports */
import { AmplifyUIAngularModule } from '@aws-amplify/ui-angular';
import { HomeComponent } from './home/home.component';
import { AuthComponent } from './auth/auth.component';



@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AuthComponent,
  ],
  imports: [
    BrowserModule,
    MatIconModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatButtonModule,
    AmplifyUIAngularModule
  ],
  providers: [AmplifyService],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<router-outlet></router-outlet>

main.ts - This is where amplify is configured. Not sure if this plays a part

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import Amplify from 'aws-amplify';
import amplify from './aws-exports';

Amplify.configure(amplify);

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

styles.css -- not sure if issue is here

/* You can add global styles to this file, and also import other style files */
@import 'https://fonts.googleapis.com/icon?family=Material+Icons';

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

/* Used to customize amplify colors */
:root {
    --amplify-primary-color: #263238;
    --amplify-primary-tint: #8c7339;
    --amplify-primary-shade: #8c7339;
  }

Do I maybe have some imports out of order thats causing icons to not render right away? I dunno, been stuck on this for a few hours. Could it be module and routing related?

Amplify Angular Auth Material Icons Not Rendering On Component Activation

0 Answers0