• Overview
@angular/router

Route

interface

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.

  
    interface Route {}
  
  

title

string | Type<Resolve<string>> | ResolveFn<string> | undefined

Used to define a page title for the route. This can be a static string or an Injectable that implements Resolve.

path

string | undefined

The path to match against. Cannot be used together with a custom matcher function. A URL string that uses router matching notation. Can be a wild card (**) that matches any URL (see Usage Notes below). Default is "/" (the root path).

pathMatch

"prefix" | "full" | undefined

The path-matching strategy, one of 'prefix' or 'full'. Default is 'prefix'.

By default, the router checks URL elements from the left to see if the URL matches a given path and stops when there is a config match. Importantly there must still be a config match for each segment of the URL. For example, '/team/11/user' matches the prefix 'team/:id' if one of the route's children matches the segment 'user'. That is, the URL '/team/11/user' matches the config {path: 'team/:id', children: [{path: ':user', component: User}]} but does not match when there are no children as in {path: 'team/:id', component: Team}.

The path-match strategy 'full' matches against the entire URL. It is important to do this when redirecting empty-path routes. Otherwise, because an empty path is a prefix of any URL, the router would apply the redirect even when navigating to the redirect destination, creating an endless loop.

matcher

UrlMatcher | undefined

A custom URL-matching function. Cannot be used together with path.

component

Type<any> | undefined

The component to instantiate when the path matches. Can be empty if child routes specify components.

loadComponent

(() => Type<unknown> | Observable<Type<unknown> | DefaultExport<Type<unknown>>> | Promise<Type<unknown> | DefaultExport<Type<unknown>>>) | undefined

An object specifying a lazy-loaded component.

redirectTo

string | RedirectFunction | undefined

A URL or function that returns a URL to redirect to when the path matches.

Absolute if the URL begins with a slash (/) or the function returns a UrlTree, otherwise relative to the path URL.

The RedirectFunction is run in an injection context so it can call inject to get any required dependencies.

When not present, router does not redirect.

outlet

string | undefined

Name of a RouterOutlet object where the component can be placed when the path matches.

canActivate

any[] | undefined

An array of CanActivateFn or DI tokens used to look up CanActivate() handlers, in order to determine if the current user is allowed to activate the component. By default, any user can activate.

When using a function rather than DI tokens, the function can call inject to get any required dependencies. This inject call must be done in a synchronous context.

canMatch

any[] | undefined

An array of CanMatchFn or DI tokens used to look up CanMatch() handlers, in order to determine if the current user is allowed to match the Route. By default, any route can match.

When using a function rather than DI tokens, the function can call inject to get any required dependencies. This inject call must be done in a synchronous context.

canActivateChild

any[] | undefined

An array of CanActivateChildFn or DI tokens used to look up CanActivateChild() handlers, in order to determine if the current user is allowed to activate a child of the component. By default, any user can activate a child.

When using a function rather than DI tokens, the function can call inject to get any required dependencies. This inject call must be done in a synchronous context.

canDeactivate

any[] | undefined

An array of CanDeactivateFn or DI tokens used to look up CanDeactivate() handlers, in order to determine if the current user is allowed to deactivate the component. By default, any user can deactivate.

When using a function rather than DI tokens, the function can call inject to get any required dependencies. This inject call must be done in a synchronous context.

canLoad

any[] | undefined
@deprecated

Use canMatch instead

An array of CanLoadFn or DI tokens used to look up CanLoad() handlers, in order to determine if the current user is allowed to load the component. By default, any user can load.

When using a function rather than DI tokens, the function can call inject to get any required dependencies. This inject call must be done in a synchronous context.

data

Data | undefined

Additional developer-defined data provided to the component via ActivatedRoute. By default, no additional data is passed.

resolve

ResolveData | undefined

A map of DI tokens used to look up data resolvers. See Resolve.

children

Routes | undefined

An array of child Route objects that specifies a nested route configuration.

loadChildren

An object specifying lazy-loaded child routes.

runGuardsAndResolvers

A policy for when to run guards and resolvers on a route.

Guards and/or resolvers will always run when a route is activated or deactivated. When a route is unchanged, the default behavior is the same as paramsChange.

paramsChange : Rerun the guards and resolvers when path or path param changes. This does not include query parameters. This option is the default.

  • always : Run on every execution.
  • pathParamsChange : Rerun guards and resolvers when the path params change. This does not compare matrix or query parameters.
  • paramsOrQueryParamsChange : Run when path, matrix, or query parameters change.
  • pathParamsOrQueryParamsChange : Rerun guards and resolvers when the path params change or query params have changed. This does not include matrix parameters.

providers

(EnvironmentProviders | Provider)[] | undefined

A Provider array to use for this Route and its children.

The Router will create a new EnvironmentInjector for this Route and use it for this Route and its children. If this route also has a loadChildren function which returns an NgModuleRef, this injector will be used as the parent of the lazy loaded module.

Jump to details