What is the purpose of an Angular Resolve guard vs ngOnInit?

WHAT THIS TESTS: This question probes your understanding of the Angular router lifecycle and whether you think about user experience at the route boundary versus inside the component. Interviewers want to see that you know when navigation is blocked, when the component actually instantiates, and how to prevent janky UI transitions.

A GOOD ANSWER COVERS: A strong response hits four points in order. First, the Resolve guard is a data provider whose resolve method runs after the ResolveStart event and blocks route activation until the returned observable, promise, or value emits. The router only activates the component once the data is ready, so the component can read it synchronously from ActivatedRoute.data. Second, fetching inside ngOnInit happens after the component and its template are already rendered, which means the user sees an empty or skeleton state while the request is in flight. Third, the UX problem is the flicker and layout shift that occurs when the template transitions from uninitialized to populated, plus the difficulty of gracefully cancelling or redirecting navigation if the fetch fails after the route is already visible. Fourth, modern Resolve implementations can return a RedirectCommand, allowing the router to redirect before the target component ever renders if the data cannot be loaded.

COMMON WRONG ANSWERS: Red flags include saying Resolve is just a best practice or cleaner architecture without mentioning that it blocks navigation. Another mistake is claiming that Resolve runs inside or after the component lifecycle. Some candidates also miss the error-handling angle, failing to explain that a rejected resolve can prevent navigation entirely or trigger a redirect, whereas a failed ngOnInit fetch leaves the user stranded on a broken page.

LIKELY FOLLOW-UPS: Expect the interviewer to ask how you would handle very slow resolvers without freezing the UI, whether you would combine Resolve with lazy loading, or how to migrate from class-based Resolve to the modern ResolveFn. They may also ask how to test a resolver in isolation.

ONE CONCRETE EXAMPLE: Imagine a dashboard that requires a large configuration object before any widget can render. Without Resolve, the dashboard component mounts, shows six loading spinners, and then snaps into place as each widget receives its config. If the config endpoint returns a 403, the user briefly sees the dashboard frame before being kicked out. With Resolve, the router waits for the config, then instantiates the dashboard with data already present. If the config fetch fails, the resolver returns a RedirectCommand to the access-denied page, and the user never sees the dashboard shell at all.

Source: angular.dev