Routing Basics 4.0
Create a new project named
router_example, and populate it as described in
Setup for Development. Then add the router and forms packages as
For this first milestone, you’ll create a rudimentary version of the app that navigates between two (placeholder) views.
Set the base href
The router uses the browser’s
for navigation. Thanks to
pushState, you can make in-app URLs indistinguishable from server URLs,
Modern HTML 5 browsers were the first to support
pushState which is why many people refer to these URLs as
“HTML 5 style” URLs.
HTML 5 style is the router default. See the Appendix on LocationStrategy and browser URL styles to learn why HTML 5 style is preferred, how to adjust its behavior, and how to switch to the older hash (#) style, when necessary.
You must add a <base href> element
to the app’s
pushState routing to work.
The browser uses the base
href value to prefix relative URLs when referencing
CSS files, scripts, and images.
For a production build, replace the
<script> with a
<base> element where the
href is set to your app’s root path.
If the path is empty, then use:
You can also statically set the
<base href> during development.
pub serve from the command line, use
When running apps from WebStorm, use
where my_project is the name of your project.
Configure the routes for the Router
Begin by importing the router library.
The router is not part of the Angular core, it is in its own library. The router is an optional service because not all apps need routing and, depending on your requirements, you may need a different routing library.
You teach the router how to navigate by configuring it with routes.
A router must be configured with a list of route definitions. A router also needs a host component, a point of origin for its navigations.
@RouteConfig annotation combines the creation of a new router, its configuration, and
its assignment to a host component in a single step.
@RouteConfig() is applied to
AppComponent which makes it the router’s host component.
The argument to
@RouteConfig() is a list of route definitions.
Each definition is a Route which has a
path: the URL path segment for this route
name: the name of the route, which must be spelled in PascalCase to avoid possible confusion with the route
component: the component associated with this route
The router draws upon its registry of definitions when the browser URL changes or when app code tells the router to navigate along a route path.
In simpler terms, you might say this of the first route:
When the browser’s location URL changes to match the path segment
/crisis-center, then the router activates an instance of the
CrisisCenterComponentand displays its view.
When the app requests navigation to the route named
CrisisCenter, then the router activates an instance of
CrisisCenterComponent, displays its view, and updates the browser’s address location and history with the URL for that path.
The AppComponent shell
AppComponent is the app shell. It has a title, a navigation bar with two links,
and a router outlet where the router swaps views on and off the page. Here’s what you get:
RouterOutlet is a directive from the router library that marks
the spot in the template where the router should display the views for that outlet.
<router-outlet> element is rendered in the DOM.
The router inserts the outlet’s view elements as siblings
immediately after the
Above the outlet, within the anchor tags, you see
property bindings to
RouterLink directives that look like
The template expression to the right of the equals is a
link parameters list, and it
holds the ingredients to router navigation:
- the name of the route that prescribes the destination component and a path for the URL
- optional route and query parameters that go into the route URL
The lists shown in the example above, each have a single parameter, a route name. You’ll see the use of route parameters later.
RouterLink directive adds the
router-link-active CSS class to active router link.
This cascades down through each level of the route tree, so parent and child router links
can be active at the same time.
Declaring router providers and directives
To tell Angular that your app uses the router, specify ROUTER_PROVIDERS in your app’s bootstrap function:
Which location strategy to use
The default LocationStrategy is PathLocationStrategy so, in
production, you can use ROUTER_PROVIDERS without the LocationStrategy
During development, it is more convenient to use HashLocationStrategy
pub serve does not support deep linking.
See the Router Appendix on LocationStrategy and browser URL styles
To use router directives like
RouterOutlet within a
component, add them individually to the component’s
or for convenience you can add the ROUTER_DIRECTIVES list.
You’ve got a very basic, navigating app, one that can switch between two views when the user clicks a link. The starter app’s structure looks like this:
Here are the files discussed in this milestone