title: Angular 6 ngOninit not called going from child to parent
body: <p>Consider the following setup:</p>
  
  <pre><code>{ path: 'module1', component: Module1Component, children: [
      { path: 'component1', component: Component1Component, children: [
          { path: 'component2', component: Component2Component }
      ] }
  ] },
  </code></pre>
  
  <p>So based on the above:</p>
  
  <ul>
  <li><em>/module1</em> loads <em>Module1Component</em></li>
  <li><em>/module1/component1</em> loads <em>Component1Component</em></li>
  <li><em>/module1/component1/component2</em> loads <em>Component2Component</em> </li>
  </ul>
  
  <p>Also</p>
  
  <ul>
  <li><em>Module1Component</em> is the parent of <em>Component1Component</em></li>
  <li><em>Component1Component</em> is the parent of <em>Component2Component</em> </li>
  </ul>
  
  <p><strong>Module1Component Code</strong></p>
  
  <pre><code>import { Component, OnInit } from "@angular/core";
  
  @Component({
      selector: 'app-module1-component',
      templateUrl: './module1.component.html',
      styleUrls: ['./module1.component.css']
  })
  export class Module1Component implements OnInit {
  
      constructor() {}
  
      ngOnInit() {
          console.log('Module1Component');
      }
  }
  </code></pre>
  
  <p><strong>Component1Component Code</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
      selector: 'app-component1',
      templateUrl: './component1.component.html',
      styleUrls: ['./component1.component.css']
  })
  export class Component1Component implements OnInit {
  
      constructor() { }
  
      ngOnInit() {
          console.log('Component1Component');
      }
  
  }
  </code></pre>
  
  <p><strong>Component2Component Code</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
      selector: 'app-component2',
      templateUrl: './component2.component.html',
      styleUrls: ['./component2.component.css']
  })
  export class Component2Component implements OnInit {
  
      constructor() { }
  
      ngOnInit() {
          console.log('Component2Component');
      }
  
  }
  </code></pre>
  
  <p><strong>ISSUE</strong></p>
  
  <p>Given these links:</p>
  
  <pre><code>&lt;a [routerLink]="['/module1']"&gt;/module1&lt;/a&gt;
  &lt;a [routerLink]="['/module1/component1']"&gt;/module1/component1&lt;/a&gt;
  &lt;a [routerLink]="['/module1/component1/component2']"&gt;/module1/component1/component2&lt;/a&gt;
  </code></pre>
  
  <ul>
  <li><p>When you are on <em>/module1/component1/component2</em> and you go to <em>/module1/component1</em> using the routerLink above the <strong>ngOnInit of Component1Component is not called</strong>.</p></li>
  <li><p>When you are on <em>/module1/component1</em> and go to <em>/module1</em> using the routerLink above the <strong>ngOnInit of Module1Component is not called</strong>.</p></li>
  </ul>
  
  <p><strong>Conclusion</strong>: The ngOnInit going from a child to a parent using routerLink is not called, why and how can it be configured to do so ?</p>
  
  <p><strong>NOTE</strong>: The same behavior occurs when using <em>router.navigate</em> or using the <em>back button in the browser</em>.</p>