Angular5 Http Request with process tracking somehow breaks routes

Question

I am facing a very strange problem. I implemented a file upload function for PDFs with REST api and track the upload process like that.

My upload function looks like this:

upload(){
    this.showFilesToUpload = false;
    this.showProgressBar = true;
    let headers = new HttpHeaders().set('x-access-token', localStorage.getItem('x-access-token'))
    let formData = new FormData();
    for (let i = 0; i < this.files.length; i++) {
        const req = new HttpRequest('POST', this.domain + 'api/uploadpdf', formData, {
            reportProgress: true,
            headers: headers
        });
        this.files[i].fileEntry.file(file => {
            formData.append("fileupload", file, this.files[i].relativePath);
            if (i === this.files.length - 1) {
                this.http.request(req).subscribe(event => {

                    if (event.type === HttpEventType.UploadProgress) {

                        this.setProzentUploaded(Math.round(100 * event.loaded / event.total));
                        this.ref.detectChanges();
                    } else if (event instanceof HttpResponse) {
                        console.log(event)
                        swal({
                            title: 'All Documents Uploaded!',
                            type: 'success'
                        }).then((isConfirm) => {
                            if (isConfirm) {
                                this.showProgressBar = false;
                                this.showFilesToUpload = true;
                                this.files = [];
                                this.progressBarValue = 0;
                                this.ref.detectChanges();
                            }
                        });
                    }
                });
            }
        });
    }

}

It all workes until the upload is finished and I want to change the route back to the home component:

 <button (click)="navigateHome()">Back Home</button>

 navigateHome() {
    this.router.navigate(['/']);
}

Then it somehow breaks the routing... It displays both my home component and my upload component (first home and below that the upload component) and all buttons with routing doesn't work anymore. It changes the route but the view isn't changing.

In my app.component.html I always display a search bar (so outside of the router-outlet).

<search class="search" *ngIf="tokenAndUserSet()"></search>
<router-outlet class="content"></router-outlet>

When I click on that the router refreshes and displays everything as it should. No console errors, backend errors or else is appearing and the Http response is fine as well (200). I am more then clueless what is going on... Thanks in advance!