Functional Guards — Series 2

Preview — 3 of 10 questions

What does this feature do?

javascript

provideRouter(routes, withViewTransitions({ skipInitialTransition: true }))

AIt wraps each navigation's DOM update in document.startViewTransition(), so the browser cross-fades — or animates, per your CSS — between the old and new page, with the initial page load excluded

BIt adds Angular animations to every route change

CIt preloads the next route's component to make transitions smoother

DIt disables change detection during navigation

Clicking the same link twice produces no NavigationEnd for the second click. Why?

javascript

provideRouter(routes, withRouterConfig({ onSameUrlNavigation: 'reload' }))
// and, on the route that needs it
{ path: 'feed', component: Feed, runGuardsAndResolvers: 'always' }

AThe router ignores repeated clicks for 300 ms

BIt emits NavigationEnd only for the first navigation to a URL, ever

CThe second click is cancelled by a guard

DNavigating to the URL already active is skipped by default — the router emits NavigationSkipped instead. onSameUrlNavigation: 'reload' makes it re-run guards and resolvers

What does the generic parameter give you?

javascript

export const unsavedChangesGuard: CanDeactivateFn<EditorPage> = (component) =>
  component.form.dirty ? confirm('Discard changes?') : true;

AThe component instance being left, typed — so the guard can ask it about its own state without a shared service

BThe route's data, typed

CThe next component to be activated

DNothing; the parameter is erased at runtime

Answer all 10 questions (7 more), see explanations for every answer, and track your score.