Redirecting to maintenance page


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


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';

export class AuthGuardMaintenance implements CanActivate {

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

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


auth.service file:

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

  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

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

Leave a Reply

(*) Required, Your email will not be published