Angular Web Framework Routing & Navigation 5 — Questions and Answers
Question 1: Which Angular feature introduced in v14+ allows defining routes without NgModules by using standalone components?
- RouterModule.forStandalone()
- provideRouter() in bootstrapApplication() (Correct answer)
- StandaloneRouterModule.forRoot()
- RouterDirective standalone import
Correct answer: provideRouter() in bootstrapApplication()
In standalone Angular apps, provideRouter() is passed to bootstrapApplication() providers to configure routing without any NgModule.
Question 2: How does Angular's RouterLinkActive directive determine which link is currently active?
- It compares the link's href to window.location.href using strict string equality
- It checks whether the link's route is part of the current active route tree (Correct answer)
- It listens for click events and adds the class only after a click
- It reads a manually set 'active' property from the route definition
Correct answer: It checks whether the link's route is part of the current active route tree
RouterLinkActive adds its CSS class when the associated route is part of the currently active route tree, supporting both exact and prefix matching.
Question 3: What is the purpose of the router's state object passed via NavigationExtras when calling Router.navigate()?
- It sets query parameters that appear in the URL
- It passes transient data to the target route without encoding it in the URL (Correct answer)
- It overrides the target component's @Input() bindings
- It defines the scroll position to restore after navigation
Correct answer: It passes transient data to the target route without encoding it in the URL
NavigationExtras.state passes ephemeral data to the destination route accessible via HistoryState, without that data appearing in the URL.
Question 4: In Angular routing, what does bindToComponentInputs: true in RouterModule.forRoot() configuration enable?
- Two-way data binding between parent and child route components
- Automatic binding of route params, query params, and data to component @Input() properties (Correct answer)
- Enables routerLink on all native HTML elements automatically
- Binds the RouterOutlet component events to the parent component
Correct answer: Automatic binding of route params, query params, and data to component @Input() properties
bindToComponentInputs automatically maps route parameters, query parameters, and data to matching @Input() properties on the routed component, removing the need for ActivatedRoute injection.
Question 5: What is the recommended way to handle route-level error states when a Resolve guard's Observable throws an error?
- Wrap the resolve logic in try/catch and return a default value
- Return EMPTY or use catchError to redirect to an error route (Correct answer)
- Let the error propagate to the global Angular error handler
- Use a separate CanActivate guard to pre-check the data source
Correct answer: Return EMPTY or use catchError to redirect to an error route
Catching the error inside the resolver with catchError and returning EMPTY (which cancels navigation) or a redirect UrlTree is the clean approach to resolver error handling.
Question 6: Which Angular Router configuration option controls whether the router should use HTML5 pushState or hash-based URLs?
- urlStrategy in RouterModule.forRoot()
- LocationStrategy provided via useClass in providers (Correct answer)
- hashMode: true in RouterModule.forRoot()
- router.useHashUrls() method
Correct answer: LocationStrategy provided via useClass in providers
Providing HashLocationStrategy using { provide: LocationStrategy, useClass: HashLocationStrategy } switches routing to hash-based URLs (#/path) instead of HTML5 pushState.
Question 7: When using Angular's Router, what is the difference between router.navigate() and router.navigateByUrl()?
- navigate() is asynchronous; navigateByUrl() is synchronous
- navigate() accepts a commands array with relative support; navigateByUrl() accepts a full URL string and is always absolute (Correct answer)
- navigateByUrl() supports named outlets; navigate() does not
- navigate() triggers guards; navigateByUrl() bypasses all guards
Correct answer: navigate() accepts a commands array with relative support; navigateByUrl() accepts a full URL string and is always absolute
router.navigate() takes a commands array and supports relative navigation, while router.navigateByUrl() takes a complete URL string and always navigates absolutely.
Angular Web Framework Routing & Navigation 5
Which Angular feature introduced in v14+ allows defining routes without NgModules by using standalone components?