ExtraOptions

Makes the router log all its internal events to the console.

Enables the location strategy that uses the URL fragment instead of the history API.

Disables the initial navigation.

A custom error handler.

Configures a preloading strategy. See PreloadAllModules.

Define what the router should do if it receives a navigation request to the current URL. By default, the router will ignore this navigation. However, this prevents features such as a "refresh" button. Use this option to configure the behavior when navigating to the current URL. Default is 'ignore'.

Configures if the scroll position needs to be restored when navigating back.

• 'disabled'--does nothing (default).
• 'top'--set the scroll position to 0,0..
• 'enabled'--set the scroll position to the stored position. This option will be the default in the future.

When enabled, the router stores and restores scroll positions during navigation. When navigating forward, the scroll position will be set to [0, 0], or to the anchor if one is provided.

You can implement custom scroll restoration behavior as follows.

class AppModule {
 constructor(router: Router, viewportScroller: ViewportScroller, store: Store<AppState>) {
   router.events.pipe(filter(e => e instanceof Scroll), switchMap(e => {
     return store.pipe(first(), timeout(200), map(() => e));
   }).subscribe(e => {
     if (e.position) {
       viewportScroller.scrollToPosition(e.position);
     } else if (e.anchor) {
       viewportScroller.scrollToAnchor(e.anchor);
     } else {
       viewportScroller.scrollToPosition([0, 0]);
     }
   });
 }
}

You can also implement component-specific scrolling like this:

class ListComponent {
  list: any[];
  constructor(router: Router, viewportScroller: ViewportScroller, fetcher: ListFetcher) {
    const scrollEvents = router.events.filter(e => e instanceof Scroll);
    listFetcher.fetch().pipe(withLatestFrom(scrollEvents)).subscribe(([list, e]) => {
      this.list = list;
      if (e.position) {
        viewportScroller.scrollToPosition(e.position);
      } else {
        viewportScroller.scrollToPosition([0, 0]);
      }
    });
  }
}

Configures if the router should scroll to the element when the url has a fragment.

• 'disabled'--does nothing (default).
• 'enabled'--scrolls to the element. This option will be the default in the future.

Anchor scrolling does not happen on 'popstate'. Instead, we restore the position that we stored or scroll to the top.

Configures the scroll offset the router will use when scrolling to an element.

When given a tuple with two numbers, the router will always use the numbers. When given a function, the router will invoke the function every time it restores scroll position.

Defines how the router merges params, data and resolved data from parent to child routes. Available options are:

• 'emptyOnly', the default, only inherits parent params for path-less or component-less routes.
• 'always', enables unconditional inheritance of parent params.

A custom malformed uri error handler function. This handler is invoked when encodedURI contains invalid character sequences. The default implementation is to redirect to the root url dropping any path or param info. This function passes three parameters:

• 'URIError' - Error thrown when parsing a bad URL
• 'UrlSerializer' - UrlSerializer that’s configured with the router.
• 'url' - The malformed URL that caused the URIError

Defines when the router updates the browser URL. The default behavior is to update after successful navigation. However, some applications may prefer a mode where the URL gets updated at the beginning of navigation. The most common use case would be updating the URL early so if navigation fails, you can show an error message with the URL that failed. Available options are:

• 'deferred', the default, updates the browser URL after navigation has finished.
• 'eager', updates browser URL at the beginning of navigation.

Enables a bug fix that corrects relative link resolution in components with empty paths. Example:

const routes = [
  {
    path: '',
    component: ContainerComponent,
    children: [
      { path: 'a', component: AComponent },
      { path: 'b', component: BComponent },
    ]
  }
];

From the ContainerComponent, this will not work:

<a [routerLink]="['./a']">Link to A</a>

However, this will work:

<a [routerLink]="['../a']">Link to A</a>

In other words, you're required to use ../ rather than ./. The current default in v6 is legacy, and this option will be removed in v7 to default to the corrected behavior.