Getting view destroyed error when going from one page to another in angular

Question

I'm using angular to make a web app.Whenever i click login or logout function i get this error

LoginComponent.html:9 ERROR Error: ViewDestroyedError: Attempt to use a destroyed view: detectChanges
at viewDestroyedError (core.js:9783)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14635)
at checkAndUpdateView (core.js:13785)
at callWithDebugContext (core.js:15039)
at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:14576)
at ViewRef_.detectChanges (core.js:11560)
at eval (flash-messages.component.js:39)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4724)
at ZoneDelegate.invokeTask (zone.js:420)

And due to this my css is affected and the entire page looks disrupted.

I tried all the answers given on stack overflow to overcome this problem but nothing is helping me.

Here is a code from one of the ts files

 import { Component, OnInit ,OnDestroy 
,ChangeDetectorRef,ChangeDetectionStrategy} from '@angular/core';
import { UserLogs } from '../../model/UserLog';
import { AuthService } from '../../services/auth.service';
import { FlashMessagesService } from 'angular2-flash-messages';
import { Router } from '@angular/router';
import { ViewEncapsulation } from '@angular/core';
import { Observer } from '@firebase/util';
import { ISubscription } from 'rxjs/Subscription';
@Component({
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit ,OnDestroy {
  user:UserLogs;
  private subscription: ISubscription;
  constructor(private authService :AuthService,
   private router:Router,
    private flashMsg : FlashMessagesService,private changeDetectorRef:ChangeDetectorRef
  ) { }

  ngOnInit() {
    this.user={ntid:"",password:""};
    this.subscription= this.authService.getAuth().subscribe(auth =>{
      console.log(this.authService.who);

      if(auth)
      {
        console.log('logged in '+localStorage.getItem("token"));

        if(localStorage.getItem("token")=="user")
        {
          this.router.navigate(['/chat']);
        }
        else if(localStorage.getItem("token")=="consultant"){
          this.router.navigate(['/consultant']);
        }
      }
      else{
        console.log('Logged out');
        this.router.navigate(['/']);
      }
      if (!this.changeDetectorRef['destroyed']) {
        this.changeDetectorRef.detectChanges();
    }
    })
  }

  onSubmit({value,valid}:{value:UserLogs,valid:boolean}){
    localStorage.setItem("token", "user");
    this.authService.login(value.ntid+'@gmail.com',value.password,"user")
    .then(res =>{

      this.flashMsg.show('You are now logged in',
        {cssClass:'alert-success',timeout : 4000});

        this.router.navigate(['/chat']);
      }).catch(err =>{
        this.flashMsg.show(err.message,
        {cssClass:'alert-danger',timeout : 4000});
      })

  }
  onSubmit1({value,valid}:{value:UserLogs,valid:boolean}){
    localStorage.setItem("token", "consultant");
    this.authService.login(value.ntid+'@gmail.com',value.password,"consultant")
    .then(res =>{

      this.flashMsg.show('You are now logged in',
        {cssClass:'alert-success',timeout : 4000});

        this.router.navigate(['/consultant']);
      }).catch(err =>{
        this.flashMsg.show(err.message,
        {cssClass:'alert-danger',timeout : 4000});
      })

  }
  ngOnDestroy() {
    this.changeDetectorRef.detach();
    this.subscription.unsubscribe();
  }
}

What should i do to solve this problem?Please help.

Also my login page css changes after logout

Should have been this after logout

But this is what happens after logout

And when i hover over the login form this happens after logout

This is logincomponent.html

<div class="row">
<div class="col-md-6 mx-auto">
  <flash-messages></flash-messages>
  <div class="card">
    <div class="card-body">
    <h1 class="text-center pb-4 pt-3" style="color:#406E8E">
      <span class="text-info"><i class="fa fa-lock"></i>User</span> Login</h1>
  <form #loginForm="ngForm" >
    <div class="form-group mb-4">
      <label for="ntID">Username</label>
      <input type="text"
        [(ngModel)]="user.ntid"
        name="ntid"
        [ngClass]="{'is-invalid':ntid.errors && ntid.touched}"
        #ntid="ngModel"
        required
        minlength="7"
       placeholder="NTID" class="form-control z-depth-5 " id="email">
       <div [hidden]="!ntid.errors?.required"
          class="invalid-feedback">Username required
        </div>
        <div [hidden]="!ntid.errors?.minlength"
          class="invalid-feedback">Must be atleast 7 characters
        </div>
  </div>
    <div class="form-group mb-4">
      <label for="password">Password</label>
        <input type="password" placeholder="Password" class="form-control z-depth-5 "
        [(ngModel)]="user.password"
        name="password"
        [ngClass]="{'is-invalid':password.errors && password.touched}"
        #password="ngModel"
        required>
        <div [hidden]="!password.errors?.required"
          class="invalid-feedback">Password is required
        </div>
      </div>
    <button class="btn btn-outline-info btn-lg btn-block mb-4" id="signInBtn" (click)="onSubmit(loginForm)"
     >Login as user</button>
    <button class="btn btn-outline-primary btn-lg btn-block mb-4" id="signInBtn1" (click)="onSubmit1(loginForm)">
      Login as consultant</button>
  </form>
  </div>
</div>

What is causing the css to change?I have no where added any css that apperas after logout

@Zze my main problem is the design changing and i don't know how to handle that — alia, Apr 15 '18 at 22:09
@Zze when i refresh the page it works properly but after routing it does not — alia, Apr 15 '18 at 22:17

Yerkon · Answer 1 · 2018-04-16T06:18:36.360

0

Try to change to this, more correct way:

<form (ngSubmit)="onSubmit(loginForm)" #loginForm="ngForm">

...
<button type="submit" class="btn btn-outline-info btn-lg btn-block mb-4" 
        id="signInBtn">Login as user</button>
<button type="submit"  class="btn btn-outline-primary btn-lg btn-block mb- 
    4" id="signInBtn1">Login as consultant</button>

I think something with, navigatuin starts before {cssClass:'alert-success'} is done. Maybe I'm wrong:

// this.flashMsg.show('You are now logged in',
// {cssClass:'alert-success',timeout : 4000}); // comment this line of code

this.router.navigate(['/consultant']);

Also, no need manually unsubscribe from Http requsts observables. SO answer:

ngOnDestroy() {
    this.changeDetectorRef.detach();
    // this.subscription.unsubscribe();
}

edited Apr 16 '18 at 06:18

answered Apr 16 '18 at 05:50

Yerkon

4,548
1
18
30

2

We also can suspect that something wrong with `flash-messages.component` since the error comes from it. Looks like he runs `cdRef.detectChanges` there. – yurzui Apr 16 '18 at 06:08
But why is the css is being affected due to that..i removed the flash message part..now i don't get the rror but stilll the css changes – alia Apr 16 '18 at 07:35

Getting view destroyed error when going from one page to another in angular

1 Answers1