Skip to content
QuiznExam

Guards & Resolvers in Angular

Test your knowledge of Angular route guards and resolvers, including CanActivate, CanDeactivate, CanMatch, Resolve, route protection, navigation control, and preloading route data.

15
Questions
12 min
Time limit
Medium
Difficulty

No sign-up needed · Last updated:

Save your score

At least 8 characters.

Forgot password?

Related quizzes

All 15 questions and answers Spoilers: this shows the questions and answers. Try the quiz first! Open

  1. 1. What is the primary purpose of route guards in Angular?

    • A. To style routed components
    • B. To control whether navigation to or from a route is allowed
    • C. To create HTTP requests
    • D. To compile Angular templates
    Show answer

    B. To control whether navigation to or from a route is allowed

    Route guards allow Angular applications to control navigation based on conditions such as authentication or user permissions.

  2. 2. Which Angular guard is commonly used to determine whether a user can activate a route?

    • A. CanActivate
    • B. CanDeactivate
    • C. Resolve
    • D. CanLoadData
    Show answer

    A. CanActivate

    CanActivate is used to determine whether navigation to a route can proceed.

  3. 3. Which guard can be used to prevent a user from leaving a route?

    • A. CanActivate
    • B. CanDeactivate
    • C. Resolve
    • D. CanMatch
    Show answer

    B. CanDeactivate

    CanDeactivate can be used to determine whether the user is allowed to navigate away from a component, such as when unsaved changes exist.

  4. 4. What is a common use case for CanActivate?

    • A. Checking whether a user is authenticated
    • B. Loading CSS files
    • C. Creating database tables
    • D. Formatting HTML
    Show answer

    A. Checking whether a user is authenticated

    CanActivate is commonly used to protect routes that should only be accessible to authenticated or authorized users.

  5. 5. What is the purpose of a route resolver in Angular?

    • A. To load required data before route activation
    • B. To prevent all navigation
    • C. To define CSS styles
    • D. To create Angular modules
    Show answer

    A. To load required data before route activation

    A resolver retrieves data before the route is activated so the component can receive the required data when it is initialized.

  6. 6. Which Angular routing feature is used to implement a resolver?

    • A. Resolve
    • B. CanActivate
    • C. CanDeactivate
    • D. RouterLink
    Show answer

    A. Resolve

    The Resolve route configuration is used to specify data that should be resolved before route activation.

  7. 7. Where is resolved data commonly made available to the routed component?

    • A. Through the ActivatedRoute data
    • B. Through the CSS file
    • C. Through index.html
    • D. Through the browser URL only
    Show answer

    A. Through the ActivatedRoute data

    Resolved route data can be accessed through ActivatedRoute, typically using the route's data or data observable.

  8. 8. Which return type can a modern Angular route guard commonly provide?

    • A. Only boolean
    • B. boolean, UrlTree, or an asynchronous result such as an Observable or Promise of these
    • C. Only string
    • D. Only HTML
    Show answer

    B. boolean, UrlTree, or an asynchronous result such as an Observable or Promise of these

    Route guards can return boolean or a UrlTree, and they can also return asynchronous values such as Observables or Promises resolving to supported results.

  9. 9. What does returning a UrlTree from a route guard allow an application to do?

    • A. Redirect navigation to another route
    • B. Create a new component automatically
    • C. Change the database schema
    • D. Disable Angular routing permanently
    Show answer

    A. Redirect navigation to another route

    A guard can return a UrlTree to cancel the current navigation and redirect the user to another route.

  10. 10. Which guard is useful when route matching itself should depend on a condition?

    • A. CanMatch
    • B. CanDeactivate
    • C. Resolve
    • D. CanDestroy
    Show answer

    A. CanMatch

    CanMatch determines whether a route can be matched during route recognition, making it useful for conditional route matching and access control.

  11. 11. What is a common use case for CanDeactivate?

    • A. Preventing navigation when a form contains unsaved changes
    • B. Loading user data before a route starts
    • C. Matching a lazy-loaded route
    • D. Creating a new Angular project
    Show answer

    A. Preventing navigation when a form contains unsaved changes

    CanDeactivate is commonly used to ask the user for confirmation before leaving a page containing unsaved changes.

  12. 12. What happens if a resolver fails to provide its required result before navigation completes?

    • A. The route can fail to activate
    • B. Angular automatically ignores the resolver
    • C. The browser closes
    • D. The component is always rendered normally
    Show answer

    A. The route can fail to activate

    If a resolver's observable or promise errors, navigation can fail unless the error is handled appropriately.

  13. 13. Which service is commonly injected into a guard when navigation needs to be redirected?

    • A. Router
    • B. RendererFactory
    • C. ElementRef
    • D. ChangeDetectorRef
    Show answer

    A. Router

    The Router service can be used when a guard needs to create a UrlTree or otherwise work with application navigation.

  14. 14. What is a key difference between a guard and a resolver?

    • A. A guard controls navigation, while a resolver provides data before route activation
    • B. A guard loads CSS, while a resolver creates components
    • C. A guard is only for forms, while a resolver is only for authentication
    • D. There is no difference
    Show answer

    A. A guard controls navigation, while a resolver provides data before route activation

    Guards determine whether navigation can proceed, whereas resolvers are intended to obtain route data before the component is activated.

  15. 15. Which scenario is most suitable for using a resolver?

    • A. Fetching a user's profile before displaying the profile page
    • B. Changing the color of a button
    • C. Validating a CSS selector
    • D. Creating a TypeScript interface
    Show answer

    A. Fetching a user's profile before displaying the profile page

    A resolver is useful when a route depends on data that should be loaded before the component is activated.