Angular Routing: Instance Creation vs Instance Activation

Question

The Angular Routing docs mention component instance creation, component instance activation, and route activation.

The docs do not explain the differences of these concepts, and when each creation/activation occurs.

---

Questions

1. What is the difference between instance creation and instance activation?
2. What is the difference between instance activation and route activation?
3. Does instance activation always occur at the same time as instance creation?

In summary: It is not clear what is really meant by component instance activation and route activation, and how that relates to component instance creation (particularly timing wise).

---

Known Information

Instance Creation

• Component instances are created by Angular when navigating between components of different types
• When navigating between instances of the same component, the instances are re-used by default

Instance Activation

• When browser's location URL changes to match a path segment (e.g /crisis-center), Router activates an instance of corresponding component (e.g CrisisListComponent) and displays its view
• When app requests navigation to a path (e.g /crisis-center), Router activates instance of corresponding component (e.g CrisisListComponent), displays its view, and updates browser's address location and history with URL for that path

Route Activation

• Mentioned a few places throughout the docs. See below

---

Angular Doc References

Here are some mentions of the above three concepts, in the Angular docs:

Instance Creation

By default, the router re-uses a component instance when it re-navigates to the same component type without visiting a different component first.

...

This application won't re-use the HeroDetailComponent. The user always returns to the hero list to select another hero to view. There's no way to navigate from one hero detail to another hero detail without visiting the list component in between. Therefore, the router creates a new HeroDetailComponent instance every time.

Link

Instance Activation

When the browser's location URL changes to match the path segment /crisis-center, then the router activates an instance of the CrisisListComponent and displays its view.

Link

When the application requests navigation to the path /crisis-center, the router activates an instance of CrisisListComponent, displays its view, and updates the browser's address location and history with the URL for that path.

Link

Route Activation

The data property in the third route is a place to store arbitrary data associated with this specific route. The data property is accessible within each activated route.

Link

You can also protect child routes with the CanActivateChild guard. The CanActivateChild guard is similar to the CanActivate guard. The key difference is that it runs before any child route is activated.

Link

In the Hero Detail and Crisis Detail, the app waited until the route was activated to fetch the respective hero or crisis.

Link

The ActivatedRouteSnapshot contains the future route that will be activated and the RouterStateSnapshot contains the future RouterState of the application, should you pass through the guard check.

Link

Answer 1

What is the difference between instance creation and instance activation?

Instantiating means creating an instance of a route (ActivateRoute) or component. Activating of a route means attaching it to the router-outlet directive. Activating of a component means attaching it to the DOM. Routes and components are activated using activateWith function of a router-outlet directive.

Let's see some examples. Suppose you have the following routes:

{
    path: 'a',
    component: AComponent,
    children: [
        { path: 'b', component: BComponent },
        { path: ':name', component: DComponent }
    ]
}

Now you navigate to a/b.

The router will:

• instantiate { path: 'a', component: AComponent, children: [] } route
• instantiate { path: 'b', component: BComponent } route
• activate these routes by attaching them to the respective router-outlet locations
• instantiate AComponent and BComponent using this approach
• activate AComponent and BComponent by adding them to DOM

Now you navigate to a/n1.

The router will:

• reuse route for a - { path: 'a', component: AComponent, children: [] } route (no instantiation or activation)
• instantiate { path: ':name', component: DComponent } route
• activate { path: ':name', component: DComponent } route
• reuse AComponent instance (no instantiation or activation)
• instantiate DComponent instance
• activate DComponent by attaching it to the router-outlet in AComponent view

Now you navigate to a/n2.

The router will:

• reuse route for a - { path: 'a', component: AComponent, children: [] } route (no instantiation or activation)
• reuse route for n2 - { path: ':name', component: DComponent } route (no instantiation or activation)
• update params for the n2 activated route
• reuse DComponent instance (no instantiation or activation)