Angular Web Framework Routing & Navigation 3 — Questions and Answers
Question 1: In an Angular lazy-loaded route configuration, what does the loadChildren property accept in modern Angular (v9+)?
- A string path to the module file using the '#' syntax
- A dynamic import() returning a module with routing (Correct answer)
- A factory function that creates a module synchronously
- A reference to the NgModule class directly
Correct answer: A dynamic import() returning a module with routing
Modern Angular uses dynamic import() syntax like () => import('./feature/feature.module').then(m => m.FeatureModule) for lazy loading.
Question 2: What is the role of a Resolve guard in Angular routing?
- It prevents navigation until the user resolves a conflict
- It pre-fetches route data before the component is activated (Correct answer)
- It determines whether a lazy-loaded module can be loaded
- It resolves route parameter types to their primitive values
Correct answer: It pre-fetches route data before the component is activated
A Resolve guard fetches data before the route is activated, making that data available via ActivatedRoute.data when the component renders.
Question 3: How do you access query parameters from a route URL like /search?q=angular using ActivatedRoute?
- route.params.get('q')
- route.queryParamMap.get('q') via subscription or snapshot (Correct answer)
- route.data['q']
- route.fragment.get('q')
Correct answer: route.queryParamMap.get('q') via subscription or snapshot
Query parameters are accessed via route.queryParamMap (Observable) or route.snapshot.queryParamMap using the .get() method.
Question 4: Which Angular routing event fires immediately after navigation successfully completes?
- NavigationStart
- NavigationEnd (Correct answer)
- RoutesRecognized
- NavigationCancel
Correct answer: NavigationEnd
NavigationEnd is emitted by the Router's events Observable when a navigation completes successfully and the URL has been committed.
Question 5: What does relativeTo option do in Router.navigate() calls?
- It navigates relative to the application's base href
- It navigates relative to a specified ActivatedRoute instead of the root (Correct answer)
- It uses relative URL syntax for external links
- It sets the navigation direction for browser history
Correct answer: It navigates relative to a specified ActivatedRoute instead of the root
The relativeTo option allows navigation using paths relative to a given ActivatedRoute, enabling context-aware navigation within component trees.
Question 6: In Angular route configuration, what is the difference between 'children' and 'loadChildren'?
- children loads routes eagerly at app startup; loadChildren defers module loading until the route is first visited (Correct answer)
- children supports guards while loadChildren does not
- loadChildren creates a new router instance; children reuses the current one
- children is for components; loadChildren is only for directives
Correct answer: children loads routes eagerly at app startup; loadChildren defers module loading until the route is first visited
children defines eagerly loaded child routes inline, while loadChildren enables lazy loading by deferring the import of a feature module until needed.
Question 7: What Angular decorator is used to mark a class as a route guard implementing CanActivate?
- @Guard()
- @Injectable() (Correct answer)
- @Directive()
- @Component()
Correct answer: @Injectable()
Route guards are Angular services decorated with @Injectable(), allowing them to be injected into the router's DI system.
Angular Web Framework Routing & Navigation 3
In an Angular lazy-loaded route configuration, what does the loadChildren property accept in modern Angular (v9+)?