Loading in Angularfireauthguard

Question

Some way to implement a Canactivate loading in Angular 11?

import { NgModule } from '@angular/core';
import { AngularFireAuthGuard, redirectUnauthorizedTo } from '@angular/fire/auth-guard';
import { RouterModule, Routes } from '@angular/router';
import { ListaComponent } from './lista/lista.component';
import { MensagemComponent } from './mensagem/mensagem.component';

const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['/login']);

const routes: Routes = [
    {
        path: '',
        redirectTo: 'lista',
        pathMatch: 'full'
    },
    {
        path: 'lista',
        component: ListaComponent,
        canActivate: [ AngularFireAuthGuard ], 
        data: { authGuardPipe: redirectUnauthorizedToLogin }
    },
    {
        path: 'mensagem',
        component: MensagemComponent
    }
];

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

Answer 1

there is no standard way to do this by angular routing. One thing you can do is a loading component that loads and checks things. and redirects to the target screen using router.navigate (this second using canActivate) Something else might try to use Resolve Router which loads data before the component is loaded but still there is no showing anything while this as far as I know. I found this in stackoverflow https://stackoverflow.com/questions/43004412/is-there-a-way-to-display-a-loading-screen-while-waiting-for-an-angular-2-route/43004542