How can you use Angular's canActivate to negate the result of a guard?

what is angular
angular tutorial
angular cli
angular 9
create angular 7 project
angular architecture
angular latest version
angular 2 tutorial

From the Angular documentation on canActivate, it seems you can only use canActivate guards to allow proceeding to a route if the canActivate function ultimately returns true.

Is there some way to say, "only proceed to this route if the canActivate class evaluates to false" ?

For example, to not allow logged in users to visit the log in page, I tried this but it did not work:

export const routes: Route[] = [
    { path: 'log-in', component: LoginComponent, canActivate: [ !UserLoggedInGuard ] },

I got this error in the console:

ERROR Error: Uncaught (in promise): Error: StaticInjectorError[false]: 
  StaticInjectorError[false]: 
    NullInjectorError: No provider for false!
Error: StaticInjectorError[false]: 
  StaticInjectorError[false]: 
    NullInjectorError: No provider for false!

Introduction to components and templates, Your app can take action at each moment in this lifecycle through optional lifecycle Your template can use data binding to coordinate the app and DOM data,  Angular (also referred to as Angular 2+) is a web development platform built in TypeScript that provides developers with robust tools for creating the client side of web applications. Released in 2010 and formerly known as AngularJS, Angular is a JavaScript framework that was initially geared toward building single-page applications.


Thinking about your problem, one solution could be to implement a route guard that does the logic in reverse.

import { MyService } from "./myservice.service";
import { CanActivate, RouterStateSnapshot, ActivatedRouteSnapshot } from "@angular/router";
import { Injectable } from "@angular/core";

@Injectable()
export class MyGuard implements CanActivate {

    constructor(private myService: MyService) {}

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        return this.myService.isNotLoggedIn(); //if user not logged in this is true
    }
}

Angular Introduction: What It Is, and Why You Should Use It , In this Angular introduction, Ilya Bodrov explains what Angular is, why you might consider using it, and how it has changed over time. With Angular and MVC we can focus on building applications in a more declarative way, by simply defining an HTML template just like we are used to. We can them bind the template to the Model data, and handle the data via a component class.


I had a similar problem - wanted to make a login page that was only accessible if not authenticated and a dashboard only accessible if you are authenticated (and redirect user to appropriate one automatically). I solved it by making the guard itself login+route sensitive:

The Routes:

const appRoutes: Routes = [
  { path: 'login', component: LoginComponent, canActivate: [AuthGuard] },
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },

The Guard:

export class AuthGuard implements CanActivate {

  private login: UrlTree;
  private dash: UrlTree;

  constructor(private authSvc: AuthenticationService, private router: Router ) {
    this.login = this.router.parseUrl('login');
    this.dash = this.router.parseUrl('dashboard');
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree {
    if (this.authSvc.isSignedIn()) {
      if (route.routeConfig.path === 'login') {
        return this.dash;
      } else {
        return true;
      }
    } else {
      if (route.routeConfig.path === 'login') {
        return true;
      } else {
        return this.login;
      }
    }
  }
}

When and Why Angular Is a Good Technical Solution for Your Project, It automates the whole development process making app initialization, configuration, and development as easy as possible. The Angular CLI allows you to create a new Angular project, add features to it, and run unit and end-to-end tests with a few simple commands. Angular CLI is a tool for developing an Angular-based (web, PWA) application, everything is out of the box like generating components, services, pipes, unit tests etc. For installing CLI, its must-have NodeJS installed previously. Use this command to install CLI npm install -g @angular/cli


Angular For Beginners Guide: Why Angular? The Top Benefits, How to Display the View using jQuery? We now have the data on the frontend, so we need to use it to create the multiple Views. Here is how we  Angular is one of the most popular front-end frameworks for building client-side web applications for the mobile and desktop web. It follows a component-based architecture where each component is an isolated and re-usable piece of code that controls a part of the app’s UI.


Practical Uses of AngularJS: Create a Single Page Application (SPA , Despite the fact that AngularJS is commonly related to SPA, you can use Angular to build any Duration: 9:58 Posted: May 14, 2015 Dependency injection will help you manage back-end. In the end, web app becomes faster and more stable. Pre-made solutions. AngularJS contains a bunch of different solutions ready to use in the app. UI-router, routing modules and much more. Easy testing. AngularJS allows to write and test module code separately from the rest of an app.


Developer Guide: Introduction, AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your  In addition to all the built-in AngularJS directives, you can create your own directives. New directives are created by using the .directive function. To invoke the new directive, make an HTML element with the same tag name as the new directive.