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 co

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)