Route guards (canActivate, canDeactivate) in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when canActivate guard returns false?

Consider an Angular route with a canActivate guard that returns false. What is the behavior when a user tries to navigate to this route?

A The navigation proceeds and the route component loads normally.

B The navigation is cancelled and the user stays on the current page.

C The application throws a runtime error and crashes.

D The router redirects automatically to the root path.

💡 Hint

Think about what a guard returning false means for navigation.

If a canActivate guard returns false, Angular cancels the navigation. The user remains on the current page and the new route does not load.

❓ state_output

intermediate

What is the value of a flag after canDeactivate guard returns true?

In an Angular component, a canDeactivate guard checks a flag isSaved. If the guard returns true, what can we say about the isSaved flag after navigation away?

Angular

class EditComponent {
  isSaved = false;
  // canDeactivate guard checks this flag
}

A isSaved is false, meaning changes are not saved but navigation allowed.

B isSaved is true, meaning changes are saved before leaving.

C isSaved is undefined because the guard does not affect it.

D isSaved is reset to null automatically by Angular.

💡 Hint

The guard returning true means navigation is allowed, but does it guarantee saving?

The canDeactivate guard returning true means navigation is allowed. It does not guarantee that isSaved is true. The flag remains as it was.

📝 Syntax

advanced

Which option correctly implements a canActivate guard returning an Observable?

Select the correct Angular canActivate guard method that returns an Observable allowing navigation only if a user is logged in.

Angular

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { Observable, of } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  isLoggedIn = false;

  canActivate(): Observable<boolean> {
    // fill in correct return
  }
}

A return new Promise(resolve => resolve(this.isLoggedIn));

B return this.isLoggedIn ? true : false;

C return of(this.isLoggedIn);

D return Observable.of(this.isLoggedIn);

💡 Hint

Use RxJS to return an Observable of a boolean value.

The canActivate method must return an Observable. Using of(this.isLoggedIn) creates an Observable emitting the boolean value.

Option C returns a boolean, not an Observable. Option C returns a Promise, not Observable. Option C uses deprecated syntax.

🔧 Debug

advanced

Why does this canDeactivate guard cause a runtime error?

Given this canDeactivate guard code, why does it cause a runtime error when navigating away?

canDeactivate(component: any): boolean {
  return component.isSaved && component.hasPermission();
}

Angular

class EditComponent {
  isSaved = true;
  // hasPermission method is missing
}

A The guard returns false always, blocking navigation.

B component.isSaved is undefined, causing a ReferenceError.

C The guard returns a Promise instead of boolean, causing error.

D component.hasPermission is not a function, causing a TypeError.

💡 Hint

Check if all methods used on component exist.

The guard calls component.hasPermission(), but the component does not have this method. This causes a TypeError at runtime.

🧠 Conceptual

expert

What is the effect of returning a UrlTree from canActivate guard?

In Angular routing, if a canActivate guard returns a UrlTree instead of true or false, what happens?

A The router cancels current navigation and redirects to the UrlTree path.

B The router ignores the UrlTree and proceeds with navigation.

C The router throws a syntax error because UrlTree is invalid return type.

D The router navigates to both the original and UrlTree paths simultaneously.

💡 Hint

Think about how Angular handles redirect instructions from guards.

Returning a UrlTree from a canActivate guard tells Angular to cancel the current navigation and redirect to the URL represented by the UrlTree.