I am struggling to identify the root cause of the error I am encountering. My objective is to continuously check if the user is logged in whenever they access a route within the pages using Angular 5.
Below is my App.module:
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './pages/authentication/login.component';
import { AuthService } from './auth/auth.service';
import { RoutesInterceptor } from './auth/routes.interceptor';
import * as $ from 'jquery';
@NgModule({
declarations: [AppComponent, LoginComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
],
bootstrap: [AppComponent],
providers: [AuthService, RoutesInterceptor, ],
})
export class AppModule {
}
Now let's take a look at the Routes.interceptor:
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class RoutesInterceptor implements CanActivate {
constructor(private auth: AuthService) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
return this.auth.isUserAuthenticated();
}
}
Here are the routes defined in my application:
import { NgModule } from '@angular/core';
import { ExtraOptions, RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './pages/authentication/login.component';
import { RoutesInterceptor } from './auth/routes.interceptor';
const routes: Routes = [
{ path: 'pages', loadChildren: 'app/pages/pages.module#PagesModule', canActivate: [RoutesInterceptor] },
{ path: 'login', component: LoginComponent },
{ path: '', redirectTo: 'pages', pathMatch: 'full' },
{ path: '**', redirectTo: 'pages' },
];
const config: ExtraOptions = {
useHash: true,
};
@NgModule({
imports: [RouterModule.forRoot(routes, config)],
exports: [RouterModule],
})
export class AppRoutingModule {
}
If you would like more information, feel free to refer to the following image: https://i.sstatic.net/IXhKU.png