title: Angular Routing: Instance Creation vs Instance Activation
body: <p>The Angular Routing docs mention component instance creation, component instance activation, and route activation.</p>
  <p>The docs do not explain the differences of these concepts, and when each creation/activation occurs.</p>
  <hr />
  <h2>Questions</h2>
  <ol>
  <li>What is the difference between instance creation and instance activation?</li>
  <li>What is the difference between instance activation and route activation?</li>
  <li>Does instance activation always occur at the same time as instance creation?</li>
  </ol>
  <p><strong>In summary</strong>: It is not clear what is really meant by component instance <em>activation</em> and route <em>activation</em>, and how that relates to component instance <em>creation</em> (particularly timing wise).</p>
  <hr />
  <h2>Known Information</h2>
  <p><strong>Instance Creation</strong></p>
  <ul>
  <li>Component instances are created by Angular when navigating between components of different types</li>
  <li>When navigating between instances of the same component, the instances are re-used by default</li>
  </ul>
  <p><strong>Instance Activation</strong></p>
  <ul>
  <li>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</li>
  <li>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</li>
  </ul>
  <p><strong>Route Activation</strong></p>
  <ul>
  <li>Mentioned a few places throughout the docs. See below</li>
  </ul>
  <hr />
  <h2>Angular Doc References</h2>
  <p>Here are some mentions of the above three concepts, in the Angular docs:</p>
  <p><strong>Instance Creation</strong></p>
  <blockquote>
  <p>By default, the router re-uses a component instance when it
  re-navigates to the same component type without visiting a different
  component first.</p>
  <p>...</p>
  <p>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 <strong>router creates
  a new HeroDetailComponent instance every time</strong>.</p>
  </blockquote>
  <p><a href="https://angular.io/guide/router#activated-route-in-action" rel="noreferrer">Link</a></p>
  <p><strong>Instance Activation</strong></p>
  <blockquote>
  <p>When the browser's location URL changes to match the path segment
  /crisis-center, then the <strong>router activates an instance</strong> of the
  CrisisListComponent and displays its view.</p>
  </blockquote>
  <p><a href="https://angular.io/guide/router#importing-from-the-router-library" rel="noreferrer">Link</a></p>
  <blockquote>
  <p>When the application requests navigation to the path /crisis-center,
  the <strong>router activates an instance</strong> of CrisisListComponent, displays its
  view, and updates the browser's address location and history with the
  URL for that path.</p>
  </blockquote>
  <p><a href="https://angular.io/guide/router#importing-from-the-router-library" rel="noreferrer">Link</a></p>
  <p><strong>Route Activation</strong></p>
  <blockquote>
  <p>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 <strong>activated route</strong>.</p>
  </blockquote>
  <p><a href="https://angular.io/guide/router#configuration" rel="noreferrer">Link</a></p>
  <blockquote>
  <p>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 <strong>child route is activated</strong>.</p>
  </blockquote>
  <p><a href="https://angular.io/guide/router#canactivatechild-guarding-child-routes" rel="noreferrer">Link</a></p>
  <blockquote>
  <p>In the Hero Detail and Crisis Detail, the app waited until the <strong>route
  was activated</strong> to fetch the respective hero or crisis.</p>
  </blockquote>
  <p><a href="https://angular.io/guide/router#resolve-pre-fetching-component-data" rel="noreferrer">Link</a></p>
  <blockquote>
  <p>The ActivatedRouteSnapshot contains the future <strong>route that will be
  activated</strong> and the RouterStateSnapshot contains the future RouterState
  of the application, should you pass through the guard check.</p>
  </blockquote>
  <p><a href="https://angular.io/guide/router#component-less-route-grouping-routes-without-a-component" rel="noreferrer">Link</a></p>