Redirecting to maintenance page

Issue

I am looking for ways of redirecting a page to the maintenance page in angular but i am new and am research different methods for turning on maintenance mode
i found a possible solution here: @ the approved answer
Angular JS redirect to page within module config

however i don’t know how to implement it
if there someone who could explain it, i would appreciate it greatly

Solution

using an authGuard will solve this problem

auth-guard.service.ts file:

import { Injectable } from '@angular/core';
import { CanActivate, Router, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
import { AuthService } from './auth.service';
import { Observable } from 'rxjs';

@Injectable()
export class AuthGuardMaintenance implements CanActivate {

  constructor(
    private authService: AuthService, private router: Router
  ) {}

  canActivate(): Observable<boolean> | Promise<boolean> | boolean {
    if (this.authService.inMaintenance()) {
      alert('This Site Is Still Under Maintenance')
      this.router.navigate(['/maintenance']);
      return false;
    } else {
      this.router.navigate(['/']);
      return true;
    }
  }

}

auth.service file:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor() { }

  inMaintenance() {
    return false;
    }
}

then import it in the app.module.ts file and add it to providers

then import the auth guard to the app-routing.module.ts file add the property

canActivate: [AuthGuardMaintenance] 

to the the root route
eg

export const routes: Routes = [
  { path: '', component: MainComponent, canActivate: [AuthGuardMaintenance] },
  { path: 'maintenance', component: MaintenanceViewComponent },
  { path: '**', component: PageNotFoundComponent },
 ];

Answered By – StansAvenger

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0