Search

#### Docs

- Guide
  - Overview
  - Setup
  - Learning Angular
  - Architecture
  - Displaying Data
  - User Input
  - Forms
  - Dependency Injection
  - Template Syntax
- Tutorial
  - Introduction
  - 0. The Starter App
  - 1. The Hero Editor
  - 2. Master/Detail
  - 3. Multiple Components
  - 4. Services
  - 5. Routing
  - 6. HTTP
- Advanced
  - Attribute Directives
  - Component Styles
  - Deployment
  - Hierarchical Injectors
  - HTTP Client
  - Lifecycle Hooks
  - Pipes
  - Router
  - Security
  - Structural Directives
  - Testing

#### Components

- Components Gallery

#### Resources

- Cheat Sheet
- Glossary
- FAQ
- Tools
- Community and Support

#### Reference

- Videos
- API Documentation

new_releases We're currently in the progress of migrating this site from Angular version 5.3.1 to 7.0.0. Package versions might be out-of-date or inconsistent! Visit the repo for more info.

# Default, Redirect and Wildcard Routes (DRAFT) 6.0

If you notice any issues with this page, please report them.

<?code-excerpt path-base=”examples/ng/doc/router”?>

Milestone

## Default route

The initial URL in the browser bar after the app launches is something like localhost:8080.

That doesn’t match any of the configured routes, which means that the app won’t display any component when it’s launched. The user must click one of the links to trigger a navigation and component display.

It would be nicer if the app had a default route that displayed the list of heroes immediately. One way to achieve this is to add `useAsDefault: true` as an argument to the `Heroes` route definition:

<?code-excerpt “lib/src/routes_2.dart (useAsDefault)” replace=”/useAs.*?(?=,)/[!$&!]/g” title?>

      static final heroes = RouteDefinition(
        routePath: RoutePaths.heroes,
        component: hero_list_template.HeroListComponentNgFactory,
        [!useAsDefault: true!],
      );

open_in_browser Refresh the browser and try it. Notice that the heroes list is displayed when the app launches, but that the URL path is `/`.

## Redirect route

As an alternative solution, remove the `useAsDefault` argument that you just added, and instead add a redirect route that will translate an initial relative path (`'/'`) to the desired default path (`/#/heroes`).

<?code-excerpt “lib/src/routes_2.dart (redirect)” title?>

      static final all = <RouteDefinition>[
        // ···
        RouteDefinition.redirect(
          path: '',
          redirectTo: RoutePaths.heroes.toUrl(),
        ),
        // ···
      ];

open_in_browser Refresh the browser and try it. Now the browser address bar path is `/#/heroes` as if you’d navigated there directly.

## Wildcard route

While you’ve created routes to `/#/crises` and `/#/heroes`, what if the router is given another path? Add a wildcard route so that all other paths are handled by a “Not Found” (404) component:

<?code-excerpt “lib/src/routes_2.dart (wildcard)” title?>

      static final all = <RouteDefinition>[
        // ···
        RouteDefinition(
          path: '.+',
          component: not_found_template.NotFoundComponentNgFactory,
        ),
      ];

The path regular expression `'.+'` matches every non-empty path. (Exclude the empty path so that it triggers the `useAsDefault` route you defined earlier.) The router will select the wildcard route if it can’t match a route earlier in the routes list.

## App code

In this short iteration you’ve tried default, redirect and wildcard routes. Here are the files that were added or edited: