I have integrated Angularfire into my Angular project and am utilizing the authentication feature. Everything is functioning properly, however, my Resolve Navigation Guard is preventing the activation of the component in case of an error during the resolve process.
Reference:
QUERY:
How can I ensure that my dashboard route does not get activated unless the authentication has been resolved successfully without any errors?
This @Injectable serves as the AuthGuard
import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { myFirebaseAuthConfig } from "./auth";
import { AngularFire } from "angularfire2";
@Injectable()
export class CanActivateViaAuthGuard implements Resolve<any> {
constructor(private af: AngularFire) {}
resolve() {
return this.af.auth.login(myFirebaseAuthConfig)
.then(data => {
console.log(data, 'data');
return data;
})
.catch(err => {
console.log(err, 'err');
return err;
});
}
}
The Module:
@NgModule({
imports: [
routing,
AngularFireClientModule,
],
providers: [CanActivateViaAuthGuard],
declarations: [AdminComponent, LoginComponent, SignupComponent],
exports: [AdminComponent],
})
export class AdminRouteModule {}
The Route
import { Routes, RouterModule } from "@angular/router";
import { AdminComponent } from "./admin.component";
import { ModuleWithProviders } from "@angular/core";
import { LoginComponent } from "../login/login.component";
import { SignupComponent } from "../signup/signup.component";
import { CanActivateViaAuthGuard } from "../firebase/auth.service";
export const routerConfig: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{
path: 'dashboard',
component: AdminComponent,
resolve: [CanActivateViaAuthGuard],
},
{path: 'login', component: LoginComponent},
{path: 'signup', component: SignupComponent},
];
export const routing: ModuleWithProviders = RouterModule.forChild(routerConfig);