title: Angular does not execute bindings, directive and ngOnInit when route change
body: <p>In my application, I am facing problems with Angular not binding properties. It also does not call <code>ngOnInit</code> and <code>ngAfterViewInit</code> or execute directives.<br>
  Here is partial LoginComponent code:</p>
  
  <pre><code>@Component({
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.scss']
  })
  export class LoginComponent implements OnInit
  
  //.....
  
      public test: string = 'some dummy test';
  
      constructor(
          private cd: ChangeDetectorRef,
          private fb: FormBuilder, private router: Router, private route: ActivatedRoute,
          private authService: AuthService,
          private usersService: UserService,
          private notificationsService: NotificationsService
      )
      {
          this.loginForm = fb.group({
              email: ["", Validators.required],
              password: ["", Validators.required]
          });
          console.info("constructor");
      }
  
      ngOnInit()
      {
          console.info("ngOnInit");
          this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';        
      }
  
      ngAfterViewInit()
      {
          this.initGapi();
          console.info("afterviewinit");
      }
  </code></pre>
  
  <p>Strange is that this works when I open page, or HMR refresh page, but not when I login and logout.<br>
  Here is the logout code:</p>
  
  <pre><code>logout(): boolean
  {
      this.authService.logout();
  }
  
  //authservice.ts
  logout()
  {    
      localStorage.removeItem("token");
      localStorage.removeItem("refresh_token");
      localStorage.removeItem("profile");
  
      if (gapi.auth2)
      {
          const instance = gapi.auth2.getAuthInstance();
          if (instance)
          {
              instance.signOut().then(() =&gt;
              {
                  this.router.navigate(["login"]);
              });
              return;
          }
      }
      this.router.navigate(["login"]);
  }
  </code></pre>
  
  <p>The differences when I logout and binding not occur are:</p>
  
  <ul>
  <li><p>Button is not styled. This should do <code>kendoButton</code> directive <code>&lt;button class="center" kendoButton type="submit"&gt;</code></p></li>
  <li><p>Binding to test (some dummy test) is missing</p></li>
  <li><code>ngOnInit</code> and <code>ngAfterViewInit</code> is not called.</li>
  </ul>
  
  <p>There is no error in console. I also record screen (it starts with empty page). I have the latest Chrome and Firefox, and same problem is in both browsers.</p>
  
  <p><strong>Does anybody have any idea what is wrong or what else can I try?</strong></p>
  
  <p><a href="https://i.stack.imgur.com/SCoKd.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SCoKd.gif" alt="screen recording"></a></p>