The Routes Angular application demonstrates the uses of routes as well as lazy loaded child routes. The application also makes use of multiple router outlets.
The application contains 10 components and 2 modules. The root module
app.module.ts contains the following components:
The city module
The component code is simple, the
AppComponent has a single router outlet. When the
CityComponent component is loaded, a second router outlet becomes available. Components from the child route get loaded into the second router outlet.
The root module
app.module.ts provides routes for root and parks, which are:
The root path
/ gets redirected to
/home. Also the lazy loaded route for
cities is defined in the root module.
The city module
city.module.ts contains the routes for cities below:
To use Augury, we need to open DevTools.
Ctrl + Shift + I (Cmd + Opt + I on Mac)
When DevTools opens, select the Augury tab located on the far right.
With Augury opened, in the Component Tree
router-outlet as a child element, this makes sense since it is declared in the template.
In the browser, click on the Parks button. This will load the
ParksComponent and update the Component Tree view. You will notice a second
router-outlet that appears under
ParksComponent, this is where each of the park components will load into.
Try clicking on each of the links labeled:
- Park 1
- Path 2
- Park 3
Notice how each child component is loaded under
ParksComponent just underneath
router-outlet. This is how Angular inserts a component into the DOM, as a sibling element of
To see the current routes for the application, click on the Router Tree tab. This will show all the defined routes that are currently loaded in the application. The routes shows the path to each component (think view). The
AppComponent path is the root
/. The path to
/home, likewise the path to the child component
Take a look at the bottom of the router tree, you will notice
cities [Lazy], this is a lazy loaded route. This means that the child components for the path
/cities will be loaded on demand, this takes place when the Cities button is clicked. Let us see this in action, click on the Cities button and pay attention to how the lazy route is updated when the feature Angular module is loaded.
That is all there is to Angular routes. We have looked at
router-outlet, router tree and how it represents the path to the view and finally noticing lazy loaded routes.
As shown in both images there is a route called
no-name-route these usually occur when Augury is not able to find a proper name for the route. The way Augury detects the name of a route is through:
- Checking if a component is connected to the route. If so, use the name of that component
- If there is no component, Augury checks if it's a lazy route, if so it will specify the name as
path + [Lazy], example
- If there is no component and it's not a lazy route. Augury will check if it's a redirect route, if it is - Augury will return
path -> redirecting to -> redirectPathexample
cities -> redirecting to -> /cities/home
- If none of the above matches, Augury will return
no-name-route, ideally this shouldn't happen.