W3cubDocs

/Angular

@angular/router

package

Implements the Angular Router service , which enables navigation from one view to the next as users perform application tasks.

Defines the Route object that maps a URL path to a component, and the RouterOutlet directive that you use to place a routed view in a template, as well as a complete API for configuring, querying, and controlling the router state.

Import RouterModule to use the Router service in your app. For more usage information, see the Routing and Navigation guide.

Entry points

Primary

@angular/router

Implements the Angular Router service , which enables navigation from one view to the next as users perform application tasks.

Secondary

`@angular/router/testing`	Supplies a testing module for the Angular `Router` subsystem.
`@angular/router/upgrade`	Provides support for upgrading routing applications from Angular JS to Angular.

Primary entry point exports

NgModules

RouterModule

Adds directives and providers for in-app navigation among views defined in an application. Use the Angular Router service to declaratively specify application states and manage state transitions.

Classes

`ActivatedRoute`	Provides access to information about a route associated with a component that is loaded in an outlet. Use to traverse the `RouterState` tree and extract information from nodes.
`ActivatedRouteSnapshot`	Contains the information about a route associated with a component loaded in an outlet at a particular moment in time. ActivatedRouteSnapshot can also be used to traverse the router state tree.
`ActivationEnd`	An event triggered at the end of the activation part of the Resolve phase of routing.
`ActivationStart`	An event triggered at the start of the activation part of the Resolve phase of routing.
`BaseRouteReuseStrategy`	This base route reuse strategy only reuses routes when the matched router configs are identical. This prevents components from being destroyed and recreated when just the route parameters, query parameters or fragment change (that is, the existing component is reused).
`ChildActivationEnd`	An event triggered at the end of the child-activation part of the Resolve phase of routing.
`ChildActivationStart`	An event triggered at the start of the child-activation part of the Resolve phase of routing.
`ChildrenOutletContexts`	Store contextual information about the children (= nested) `RouterOutlet`
`DefaultTitleStrategy`	The default `TitleStrategy` used by the router that updates the title using the `Title` service.
`DefaultUrlSerializer`	A default implementation of the `UrlSerializer`.
`GuardsCheckEnd`	An event triggered at the end of the Guard phase of routing.
`GuardsCheckStart`	An event triggered at the start of the Guard phase of routing.
`NavigationCancel`	An event triggered when a navigation is canceled, directly or indirectly. This can happen for several reasons including when a route guard returns `false` or initiates a redirect by returning a `UrlTree`.
`NavigationEnd`	An event triggered when a navigation ends successfully.
`NavigationError`	An event triggered when a navigation fails due to an unexpected error.
`NavigationSkipped`	An event triggered when a navigation is skipped. This can happen for a couple reasons including onSameUrlHandling is set to `ignore` and the navigation URL is not different than the current state.
`NavigationStart`	An event triggered when a navigation starts.
`NoPreloading`	Provides a preloading strategy that does not preload any modules.
`OutletContext`	Store contextual information about a `RouterOutlet`
`PreloadAllModules`	Provides a preloading strategy that preloads all modules as quickly as possible.
`PreloadingStrategy`	Provides a preloading strategy.
`ResolveEnd`	An event triggered at the end of the Resolve phase of routing.
`ResolveStart`	An event triggered at the start of the Resolve phase of routing.
`RouteConfigLoadEnd`	An event triggered when a route has been lazy loaded.
`RouteConfigLoadStart`	An event triggered before lazy loading a route configuration.
`RouteReuseStrategy`	Provides a way to customize when activated routes get reused.
`Router`	A service that provides navigation among views and URL manipulation capabilities.
`RouterEvent`	Base for events the router goes through, as opposed to events tied to a specific route. Fired one time for any given navigation.
`RouterPreloader`	The preloader optimistically loads all router configurations to make navigations into lazily-loaded sections of the application faster.
`RouterState`	Represents the state of the router as a tree of activated routes.
`RouterStateSnapshot`	Represents the state of the router at a moment in time.
`RoutesRecognized`	An event triggered when routes are recognized.
`Scroll`	An event triggered by scrolling.
`TitleStrategy`	Provides a strategy for setting the page title after a router navigation.
`UrlHandlingStrategy`	Provides a way to migrate AngularJS applications to Angular.
`UrlSegment`	Represents a single URL segment.
`UrlSegmentGroup`	Represents the parsed URL segment group.
`UrlSerializer`	Serializes and deserializes a URL string into a URL tree.
`UrlTree`	Represents the parsed URL.

Functions

`convertToParamMap`	Converts a `Params` instance to a `ParamMap`.
`createUrlTreeFromSnapshot`	Creates a `UrlTree` relative to an `ActivatedRouteSnapshot`.
`defaultUrlMatcher`	Matches the route configuration (`route`) against the actual URL (`segments`).
`mapToCanActivate`	Maps an array of injectable classes with canActivate functions to an array of equivalent `CanActivateFn` for use in a `Route` definition.
`mapToCanActivateChild`	Maps an array of injectable classes with canActivateChild functions to an array of equivalent `CanActivateChildFn` for use in a `Route` definition.
`mapToCanDeactivate`	Maps an array of injectable classes with canDeactivate functions to an array of equivalent `CanDeactivateFn` for use in a `Route` definition.
`mapToCanMatch`	Maps an array of injectable classes with canMatch functions to an array of equivalent `CanMatchFn` for use in a `Route` definition.
`mapToResolve`	Maps an injectable class with a resolve function to an equivalent `ResolveFn` for use in a `Route` definition.
`provideRouter`	Sets up providers necessary to enable `Router` functionality for the application. Allows to configure a set of routes as well as extra features that should be enabled.
`provideRoutes`	Deprecated: If necessary, provide routes using the `ROUTES` `InjectionToken`. Registers a DI provider for a set of routes.
`withComponentInputBinding`	Enables binding information from the `Router` state directly to the inputs of the component in `Route` configurations.
`withDebugTracing`	Enables logging of all internal navigation events to the console. Extra logging might be useful for debugging purposes to inspect Router event sequence.
`withDisabledInitialNavigation`	Disables initial navigation.
`withEnabledBlockingInitialNavigation`	Configures initial navigation to start before the root component is created.
`withHashLocation`	Provides the location strategy that uses the URL fragment instead of the history API.
`withInMemoryScrolling`	Enables customizable scrolling behavior for router navigations.
`withNavigationErrorHandler`	Subscribes to the Router's navigation events and calls the given function when a `NavigationError` happens.
`withPreloading`	Allows to configure a preloading strategy to use. The strategy is configured by providing a reference to a class that implements a `PreloadingStrategy`.
`withRouterConfig`	Allows to provide extra parameters to configure Router.

Structures

`CanActivate`	Deprecated: Class-based `Route` guards are deprecated in favor of functional guards. An injectable class can be used as a functional guard using the `inject` function: `canActivate: [() => inject(myGuard).canActivate()]`. Interface that a class can implement to be a guard deciding if a route can be activated. If all guards return `true`, navigation continues. If any guard returns `false`, navigation is cancelled. If any guard returns a `UrlTree`, the current navigation is cancelled and a new navigation begins to the `UrlTree` returned from the guard.
`CanActivateChild`	Deprecated: Class-based `Route` guards are deprecated in favor of functional guards. An injectable class can be used as a functional guard using the `inject` function: `canActivateChild: [() => inject(myGuard).canActivateChild()]`. Interface that a class can implement to be a guard deciding if a child route can be activated. If all guards return `true`, navigation continues. If any guard returns `false`, navigation is cancelled. If any guard returns a `UrlTree`, current navigation is cancelled and a new navigation begins to the `UrlTree` returned from the guard.
`CanDeactivate`	Deprecated: Class-based `Route` guards are deprecated in favor of functional guards. An injectable class can be used as a functional guard using the `inject` function: `canDeactivate: [() => inject(myGuard).canDeactivate()]`. Interface that a class can implement to be a guard deciding if a route can be deactivated. If all guards return `true`, navigation continues. If any guard returns `false`, navigation is cancelled. If any guard returns a `UrlTree`, current navigation is cancelled and a new navigation begins to the `UrlTree` returned from the guard.
`CanLoad`	Deprecated: Use `CanMatchFn` instead Interface that a class can implement to be a guard deciding if children can be loaded. If all guards return `true`, navigation continues. If any guard returns `false`, navigation is cancelled. If any guard returns a `UrlTree`, current navigation is cancelled and a new navigation starts to the `UrlTree` returned from the guard.
`CanMatch`	Deprecated: Class-based `Route` guards are deprecated in favor of functional guards. An injectable class can be used as a functional guard using the `inject` function: `canMatch: [() => inject(myGuard).canMatch()]`. Interface that a class can implement to be a guard deciding if a `Route` can be matched. If all guards return `true`, navigation continues and the `Router` will use the `Route` during activation. If any guard returns `false`, the `Route` is skipped for matching and other `Route` configurations are processed instead.
`DefaultExport`	An ES Module object with a default export of the given type.
`EventType`	Identifies the type of a router event.
`ExtraOptions`	A set of configuration options for a router module, provided in the `forRoot()` method.
`InMemoryScrollingOptions`	Configuration options for the scrolling feature which can be used with `withInMemoryScrolling` function.
`IsActiveMatchOptions`	A set of options which specify how to determine if a `UrlTree` is active, given the `UrlTree` for the current router state.
`Navigation`	Information about a navigation operation. Retrieve the most recent navigation object with the Router.getCurrentNavigation() method .
`NavigationBehaviorOptions`	Options that modify the `Router` navigation strategy. Supply an object containing any of these properties to a `Router` navigation function to control how the navigation should be handled.
`NavigationCancellationCode`	A code for the `NavigationCancel` event of the `Router` to indicate the reason a navigation failed.
`NavigationExtras`	Options that modify the `Router` navigation strategy. Supply an object containing any of these properties to a `Router` navigation function to control how the target URL should be constructed or interpreted.
`NavigationSkippedCode`	A code for the `NavigationSkipped` event of the `Router` to indicate the reason a navigation was skipped.
`ParamMap`	A map that provides access to the required and optional parameters specific to a route. The map supports retrieving a single value with `get()` or multiple values with `getAll()`.
`Resolve`	Deprecated: Class-based `Route` resolvers are deprecated in favor of functional resolvers. An injectable class can be used as a functional guard using the `inject` function: `resolve: {'user': () => inject(UserResolver).resolve()}`. Interface that classes can implement to be a data provider. A data provider class can be used with the router to resolve data during navigation. The interface defines a `resolve()` method that is invoked right after the `ResolveStart` router event. The router waits for the data to be resolved before the route is finally activated.
`Route`	A configuration object that defines a single route. A set of routes are collected in a `Routes` array to define a `Router` configuration. The router attempts to match segments of a given URL against each route, using the configuration options defined in this object.
`RouterConfigOptions`	Extra configuration options that can be used with the `withRouterConfig` function.
`RouterFeature`	Helper type to represent a Router feature.
`RouterOutletContract`	An interface that defines the contract for developing a component outlet for the `Router`.
`UrlCreationOptions`	Options that modify the `Router` URL. Supply an object containing any of these properties to a `Router` navigation function to control how the target URL should be constructed.

Directives

`RouterLink`	When applied to an element in a template, makes that element a link that initiates navigation to a route. Navigation opens one or more routed components in one or more `<router-outlet>` locations on the page.
`RouterLinkActive`	Tracks whether the linked route of an element is currently active, and allows you to specify one or more CSS classes to add to the element when the linked route is active.
`RouterLinkWithHref`	When applied to an element in a template, makes that element a link that initiates navigation to a route. Navigation opens one or more routed components in one or more `<router-outlet>` locations on the page.
`RouterOutlet`	Acts as a placeholder that Angular dynamically fills based on the current router state.

Types

`CanActivateChildFn`	The signature of a function used as a `canActivateChild` guard on a `Route`.
`CanActivateFn`	The signature of a function used as a `canActivate` guard on a `Route`.
`CanDeactivateFn`	The signature of a function used as a `canDeactivate` guard on a `Route`.
`CanLoadFn`	Deprecated: Use `Route.canMatch` and `CanMatchFn` instead The signature of a function used as a `canLoad` guard on a `Route`.
`CanMatchFn`	The signature of a function used as a `canMatch` guard on a `Route`.
`Data`	Represents static data associated with a particular route.
`DebugTracingFeature`	A type alias for providers returned by `withDebugTracing` for use with `provideRouter`.
`DeprecatedGuard`	Deprecated: The `InjectionToken` and `@Injectable` classes for guards and resolvers are deprecated in favor of plain JavaScript functions instead.. Dependency injection can still be achieved using the `inject` function from `@angular/core` and an injectable class can be used as a functional guard using `inject`: `canActivate: [() => inject(myGuard).canActivate()]`.
`DetachedRouteHandle`	Represents the detached route tree.
`DisabledInitialNavigationFeature`	A type alias for providers returned by `withDisabledInitialNavigation` for use with `provideRouter`.
`EnabledBlockingInitialNavigationFeature`	A type alias for providers returned by `withEnabledBlockingInitialNavigation` for use with `provideRouter`.
`Event`	Router events that allow you to track the lifecycle of the router.
`InMemoryScrollingFeature`	A type alias for providers returned by `withInMemoryScrolling` for use with `provideRouter`.
`InitialNavigation`	Allowed values in an `ExtraOptions` object that configure when the router performs the initial navigation operation.
`InitialNavigationFeature`	A type alias for providers returned by `withEnabledBlockingInitialNavigation` or `withDisabledInitialNavigation` functions for use with `provideRouter`.
`LoadChildren`	A function that returns a set of routes to load.
`LoadChildrenCallback`	A function that is called to resolve a collection of lazy-loaded routes. Must be an arrow function of the following form: `() => import('...').then(mod => mod.MODULE)` or `() => import('...').then(mod => mod.ROUTES)`
`NavigationErrorHandlerFeature`	A type alias for providers returned by `withNavigationErrorHandler` for use with `provideRouter`.
`OnSameUrlNavigation`	How to handle a navigation request to the current URL. One of:
`PRIMARY_OUTLET`	The primary routing outlet.
`Params`	A collection of matrix and query URL parameters.
`PreloadingFeature`	A type alias that represents a feature which enables preloading in Router. The type is used to describe the return value of the `withPreloading` function.
`QueryParamsHandling`	How to handle query parameters in a router link. One of: `"merge"` : Merge new parameters with current parameters. `"preserve"` : Preserve current parameters. `""` : Replace current parameters with new parameters. This is the default behavior.
`ROUTER_CONFIGURATION`	A DI token for the router service.
`ROUTER_INITIALIZER`	A DI token for the router initializer that is called after the app is bootstrapped.
`ROUTES`	The DI token for a router configuration.
`ResolveData`	Represents the resolved data associated with a particular route.
`ResolveFn`	Function type definition for a data provider.
`RouterConfigurationFeature`	A type alias for providers returned by `withRouterConfig` for use with `provideRouter`.
`RouterFeatures`	A type alias that represents all Router features available for use with `provideRouter`. Features can be enabled by adding special functions to the `provideRouter` call. See documentation for each symbol to find corresponding function name. See also `provideRouter` documentation on how to use those functions.
`RouterHashLocationFeature`	A type alias for providers returned by `withHashLocation` for use with `provideRouter`.
`Routes`	Represents a route configuration for the Router service. An array of `Route` objects, used in `Router.config` and for nested route configurations in `Route.children`.
`RunGuardsAndResolvers`	A policy for when to run guards and resolvers on a route.
`UrlMatchResult`	Represents the result of matching URLs with a custom matching function.
`UrlMatcher`	A function for matching a route against URLs. Implement a custom URL matcher for `Route.matcher` when a combination of `path` and `pathMatch` is not expressive enough. Cannot be used together with `path` and `pathMatch`.