Parent parent routing does not work when navigating Angular

Question

I am using angular 5.1.0 and I have a problem with the routing system, let me explain:

In my application routing module, I have a url /apithat lazily loads another module, in this lazy loaded module I have the following 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 }}',
        },
      },
    ],
  },
];

Important here is the parameter datathat the router receives.

In my application, I have a common error behavior when, when throwing an exception, I have the errorHandler class that catches the error and redirects to another URL:, /errorthis 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 });
  }
}

, , /api handleError, , , : /api data param.

Router reset ? , , - ?

---

UPDATE

, data, , . error.component, , Router /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);
  }
}

onInit ActivatedRoute, , , , , errorHandler /api /error.

/error, , - ( /api /error)

---

UPDATE angular 5.2.9, .

Answer 1

NgZone, , "", angular angular, AppErrorHandler :

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 });
    });
  }
}

github,