Redirecting to a URL after dismissing modal using JHipster and Angular 4

I am currently working on a JHipster 4.6.2 / Angular 4 project.

I have a modal with two buttons (open and cancel) which displays information to the user. When the user clicks the 'open' button, an HTTP request is sent to the server and the user is supposed to be redirected to another URL. In the other case, when the user clicks the 'cancel' button, the modal is simply closed.

That's what I'm trying to accomplish but I am having an issue with the redirection : when I try to redirect the user with the navigate method from the router nothing happens.

It seems to be related to the use of the dismiss method since removing this instruction allows the redirection to be done normally. However doing this does not close the modal which stays on top with the requested URL behind.

Here is my code :

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Subscription } from 'rxjs/Rx';
import { JhiEventManager } from 'ng-jhipster';
import { NgbActiveModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';

import { Bulletin } from '../../entities/bulletin/bulletin.model';
import { BulletinService } from '../../entities/bulletin/bulletin.service';
import { BulletinModalService } from '../bulletin-modal.service';

@Component({
    selector: 'jhi-bulletin-mgmt-open-dialog',
    templateUrl: './bulletin-open-dialog.component.html'
})
export class BulletinMgmtOpenDialogComponent {

     bulletin: Bulletin;

    constructor(
        public activeModal: NgbActiveModal,
        private eventManager: JhiEventManager,
        private bulletinService: BulletinService,
        private router: Router
    ) {
    }

    clear() {
        this.activeModal.dismiss('cancel');
    }

    open() {
        this.bulletinService.open(this.bulletin).subscribe((loadedBulletin: Bulletin) => {
             this.eventManager.broadcast({
                 name: 'bulletinOpenModification',
                 content: 'Changed opened report'
             });
             this.activeModal.dismiss('open');
             this.router.navigate(['/user-management']);
         });
     }
}

There is no error from the server or in the javascript console.

EDIT To reproduce this issue, it is very easy :

1. Generate a new JHipster project using version 4.6.2.
2. Then open the 'user-management-dialog.component.ts' in 'src/main/webapp/app/admin/user-management' which is generated by JHipster.

3. In the 'onSaveSuccess' add a redirection like so :

   private onSaveSuccess(result) {
       this.eventManager.broadcast({ name: 'userListModification', content: 'OK' });
       this.isSaving = false;
       this.activeModal.dismiss(result);
       this.router.navigate(['/register']);
   }
   

It does not work in my environment. The solution I have found to make it work is to surround the instruction with a 'setTimeout'. See the example below :

private onSaveSuccess(result) {
    this.eventManager.broadcast({ name: 'userListModification', content: 'OK' });
    this.isSaving = false;
    this.activeModal.dismiss(result);

    setTimeout(() => {
        this.router.navigate(['/register']);
    }, 0);
}

I don't understand why this works. Could you please tell me why it does not work without the setTimeout ? And why it works using the setTimeout ?

Moreover, using the setTimeout method feels like adding a code smell to my project. Is there a better way to do the redirection ?

I also tested with the latest version of JHipster and this issue is still present.