CODEWITHSUNDEEP
angularangular-ui-routerangular2-routingangular2-forms
user3201500
user3201500

Reputation: 1618

ViewDestroyedError: Attempt to use a destroyed view: detectChanges in Angular 4

i am new to Angular 4 and trying to build a simple routing but when i am trying to redirect on successful register using this.router.navigate(['./admin/login']); so its throwing this error ViewDestroyedError: Attempt to use a destroyed view: detectChanges in console.log. Here is how my register.component.ts file looks like: 

import { Component, OnDestroy } from '@angular/core';
import { Router } from "@angular/router";
import { ChangeDetectionStrategy } from '@angular/core';

import { FormValidationService } from "../../validations/form-validation.service";
import { FlashMessagesService } from 'angular2-flash-messages';
import { AuthService } from '../../services/auth.service';

@Component({
  templateUrl: 'register.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class RegisterComponent implements OnDestroy  {
  name: String;
  email: String;
  password: String;
  re_password: String;
  mobile:String;


  constructor(private formValidation: FormValidationService, 
            private flash: FlashMessagesService, 
            private auth: AuthService,
            private router: Router) { }




  registerUser(){   
    var user = {
        name: this.name,
        email: this.email,
        password: this.password,
        re_password: this.re_password,
        mobile:this.mobile,
    }



    if(!this.formValidation.validateEmail(this.email)){
        this.flash.show("Invalid email format!",{ cssClass: 'alert-danger', timeout: 3000 });
        return false;
    }

    this.auth.authRegisterUser(user).subscribe(data => {
      if(data.success){
        this.flash.show("User created successfully!", { cssClass: 'alert-success', timeout: 3000 });
        this.router.navigate(['./admin/login']);     // <-------This is the problem -------------->
      }else{
        this.flash.show(data.message, { cssClass: 'alert-success', timeout: 3000 });
        return false;
      }
    });

  }

}

And i have created a auth.module.ts file in which i have mentioned the route for these two. 

import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';
import { FlashMessagesModule } from 'angular2-flash-messages';

import { LoginComponent } from './login.component';
import { RegisterComponent } from './register.component';
import { AuthService } from '../../services/auth.service';


import { AuthRoutingModule } from './auth-routing.module';

@NgModule({
  imports: [ AuthRoutingModule, FormsModule, FlashMessagesModule ],
  declarations: [
    LoginComponent,
    RegisterComponent
  ],
  providers: [AuthService],
})
export class AuthModule { }

Also i have this routing file auth-routing.module.ts here you can view the file:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LoginComponent } from './login.component';
import { RegisterComponent } from './register.component';

const routes: Routes = [
  {
    path: '',
    data: {
      title: 'Example Pages'
    },
    children: [
      {
        path: 'login',
        component: LoginComponent,
        data: {
          title: 'Login Page'
        }
      },
      {
        path: 'register',
        component: RegisterComponent,
        data: {
          title: 'Register Page'
        }
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AuthRoutingModule {}

Now where is the problem not getting it. Its showing this Console here is the screenshot of the problem.

enter image description here

Any suggestion will be helpful. Thank you! (in advance)

Upvotes: 4

Views: 3809

Answers (1)

ObjectiveTC
ObjectiveTC

Reputation: 2507

The problem is actually not the rerouting, but with flash-messages. In your RegisterComponent's html, you have the <flash-messages></flash-messages>; after the user is registered, you 1. call flash-messages, 2. reroute to login page.

this.flash.show("User created successfully!", { cssClass: 'alert-success', timeout: 3000 });
this.router.navigate(['./admin/login']);

The problem is that flash-messages is being told to display in the RegisterComponent.html file, which is destroyed by the reroute, so that results in flash-messages trying to display its message in the destroyed 'Register' view.

I currently don't know of any way around this. It appears that an app can only have flash-messages in one permanent location. One solution you could use is to put your flash-messages selector somewhere in app.component. Another solution would be to emit a notification from RegisterComponent that gets picked up by the view component you wish to display a message in, and sort of 'mock' a flash-message with a div styled like flash-message and a timeout.

Upvotes: 2

Related Questions