Routing child to parent is not working when navigates in Angular

Question

I'm using angular 5.1.0, and I have an issue with the routing system, let me explain:

In my app-routing module I have an url /api that lazy loads another module, in that lazy loaded module I have the next routing implementation:

api-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: ApisComponent,
    data: {
      breadcrumbs: 'APIs',
    },
    children: [
      {
        path: '',
        component: ApiListComponent,
      },
      {
        path: ':id',
        component: ApiDetailComponent,
        resolve: {
          api: ApiResolverService
        },
        data: {
          breadcrumbs: '{{ api.title }}',
        },
      },
    ],
  },
];

The important thing here is the data param that the Router receives.

In my app I have a generic error behaviour that when an exception is throwed I have a errorHandler class that catch the error and redirects to another url: /error, this is the handler code:

import { ErrorHandler, Injectable, Injector } from '@angular/core';
import { Router } from '@angular/router';

@Injectable()
export class AppErrorHandler implements ErrorHandler {

  constructor(private injector: Injector) { }

  handleError(error: any): void {
    const routerService = this.injector.get(Router);
    routerService.navigateByUrl('/error', { skipLocationChange: true });
  }
}

The problem is, when an exception is throwed inside /api and handleError is executed, I see my generic error page rendered with the breadcrumb loaded in the last route: /api by data param.

Is there any way to set the Router to reset data when is loaded? or maybe I'm doing something wrong?

---

UPDATE

At this point I thought the problem was due to data param, but now I see that it's not the problem. Let me show my error.component that is rendered when Router loads /error:

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-error',
  templateUrl: './error.component.html',
  styleUrls: ['./error.component.scss']
})
export class ErrorComponent implements OnInit {

  constructor(private router: Router, private route: ActivatedRoute) { }

  ngOnInit() {
    console.log('snapshot trace');
    console.log(this.route.snapshot);
  }
}

I have included in the onInit component method, a trace of ActivatedRoute snapshot to see what it has, and the thing is that trace is not showing when errorHandler navigates from /api to /error.

But if I load directly /error the trace is showed, so for any reason the error component is not instanciated correctly in the first scenario (navigate from /api to /error)

---

UPDATE I have upgraded to angular 5.2.9 and the problem still happens.

Answer 1

I have solved the problem using NgZone, I think the "timing" routing problem that angular has involve the render error component out of angular zone, so, the AppErrorHandler class looks like this:

import { ErrorHandler, Injectable, Injector, NgZone } from '@angular/core';
import { Router } from '@angular/router';

@Injectable()
export class AppErrorHandler implements ErrorHandler {

  constructor(private injector: Injector) { }

  handleError(error: any): void {
    const routerService = this.injector.get(Router);
    const ngZone = this.injector.get(NgZone);
    ngZone.run(() => {
      routerService.navigate(['/error'], { skipLocationChange: true });
    });
  }
}

Here a github issue related to my problem