Problemas con afterclosed()

Como esta pregunta ha estado latente durante mucho tiempo, vale la pena analizar cómo se podría haber abordado para autodiagnosticar cuál es el problema. Tomemos el código “tal cual” y veamos cómo reorganizar un poco el problema simplificaría la depuración. Primero, así es como se ve el código actualmente:

approved(){
    localStorage.setItem('encargado', this.approach.responsable.id)
    localStorage.setItem('cliente', this.approach.client.id)
    localStorage.setItem('approach', this.id)
const dialog = this.dialog.open(ProjectFormComponent)
    dialog.afterClosed().subscribe( result =>{
this.rest.get("/project?approach=" + this.id)
      .subscribe((data:any)=>{
        console.log(data)
if(data.length>0){
this.rest.put("/approach/" + this.id,{
            approachStatus: 'APROBADO'
          }).subscribe((result:any) =>{
this.router.navigate(["/proyecto/" + data[0].id])
          },error=>{
            console.log('error')
          })
        }else{
          console.log("/project?approach=" + this.id)
        }
      })
    })
  }

Se trata de un código antiguo y complicado y será difícil descubrir qué está pasando. Dividamos esto en algo mucho más manejable. Primero, dividamos el almacenamiento en su propio método:

approved(): void {
  this.writeToLocalStorage();
const dialog = this.dialog.open(ProjectFormComponent)
    dialog.afterClosed().subscribe( result =>{
this.rest.get("/project?approach=" + this.id)
      .subscribe((data:any)=>{
        console.log(data)
if(data.length>0){
this.rest.put("/approach/" + this.id,{
            approachStatus: 'APROBADO'
          }).subscribe((result:any) =>{
this.router.navigate(["/proyecto/" + data[0].id])
          },error=>{
            console.log('error')
          })
        }else{
          console.log("/project?approach=" + this.id)
        }
      })
    })
}

private writeToLocalStorage(): void {
  localStorage.setItem('encargado', this.approach.responsable.id);
  localStorage.setItem('cliente', this.approach.client.id);
  localStorage.setItem('approach', this.id);
}

Ahora, rompamos el manejo del diálogo:

private showProjectFormDialog(): void {
const dialog = this.dialog.open(ProjectFormComponent)
    dialog.afterClosed().subscribe( result =>{
this.rest.get("/project?approach=" + this.id)
      .subscribe((data:any)=>{
        console.log(data)
if(data.length>0){
this.rest.put("/approach/" + this.id,{
            approachStatus: 'APROBADO'
          }).subscribe((result:any) =>{
this.router.navigate(["/proyecto/" + data[0].id])
          },error=>{
            console.log('error')
          })
        }else{
          console.log("/project?approach=" + this.id)
        }
      })
    })
}

En este punto, podemos configurar nuestro mensaje aprobado de la siguiente manera:

approved(): void {
  this.writeToLocalStorage();
  this.showProjectFormDialog();
}

Ahora, volvamos a ordenar el manejo del diálogo. En este momento, eso es un lío de sangrías y suscripciones. Conozco TypeScript y no pude entender qué estaba pasando allí de un vistazo, así que no puedo imaginar cómo sería si alguien nuevo en el lenguaje aprendiera esto. Voy a dividir todo de una vez, poniéndole un poco de orden.

private showFormDialog(): void {
  const dialog = this.dialog.open(ProjectFormComponent);
  dialog.afterClosed().subscribe(result => {
    this.afterProjectFormClosed();
  });
}

private afterProjectFormClosed(): void {
  this.rest.get(`/project?approach={this.id}`).subscribe((data: any) => { updateProject(data); });
}

private updateProject(data: any): void {
  console.log(data);
  if (data.length > 0) {
    addProjectToStatus(data);
  }
  else {
    console.log(`Did not fetch the project at /project?approach={this.id}`);
  }
}

private addProjectToStatus(data: any): void {
  this.rest.put(`/project?approach={this.id}`).subscribe(
    (result:any) =>{ this.router.navigate(["/proyecto/" + data[0].id]); }
     ,error=>{ console.log('error'); });
}

Ahora puedo ver lo que está haciendo el código. El candidato más obvio para que haya un problema es que el registro con esa identificación no exista. Eso es lo que comprobaría primero. Lo segundo que miraría es agregar manejo de errores a la parte de llamada de descanso para ver si obtengo algo como un error 404 aquí o un estado 5xx. En este momento, el código asume ingenuamente que la suscripción siempre regresará con buena información. De todos modos, espero que te ayude si quieres saber cómo convertir un montón de código en algo que pueda depurarse fácilmente.

Nota: Realmente no me gusta ninguno como tipo de datos, pero no sé qué valores se devuelven, así que lo dejé así y agregué punto y coma y tipos nulos porque me gusta el código consistente.