angular - Downloading file using HttpClient and file-saver.js fetches JHipster app-loading page as well as requested download file

Question

Summary of problem:

I am successfully downloading requested file served from Spring rest endpoint using HttpClient and file-saver.js. However two files (should only be 1) with the requested file name get saved. The first file gets saved before the request even hits the Spring Rest endpoint. It is a 5K file that on inspection contains the jhipster app-loading html page. Once the request returns from the server a second file with the same name is saved which is the actual download file that was requested.

Why would this be happening? See library version and code examples below:

Software Versions:

"@angular/common": "8.2.0",

"@angular/core": "8.2.0",

"file-saver": "^2.0.2",

"rxjs": "6.4.0",

DownloadService

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class DownloadsService {
    public resourceUrl = 'api/downloads/';
    constructor(private http: HttpClient) {}

    download(fileId: string): Observable<Blob> {
        const url = this.resourceUrl + fileId;
        return this.http.get(url, {reportProgress: true, responseType: 'blob'});
    }
}

DownloadComponent

import {Component, OnInit} from '@angular/core';
import {faApple, faLinux, faWindows} from '@fortawesome/free-brands-svg-icons';
import {DownloadsService} from './downloads.service';
import * as fileSaver from 'file-saver';

@Component({
    selector: 'jhi-downloads',
    templateUrl: './downloads.component.html',
    styleUrls: ['./downloads.component.css']
})
export class DownloadsComponent implements OnInit {
    
    ... download object defined here with file name and fileid

    termsAccepted = false;

    constructor(private downloads: DownloadsService) {
    }

    ngOnInit() {
    }

    onClick(download) {
        const filename = download.filename;
        const fileId = download.fileId;
        this.downloads.download(fileId)
            .subscribe(blob => {
                fileSaver.saveAs(blob, filename);
            });
    }
}

The result of which is 2 files:

filename.ext - this is the jhipster app-loading html page (5k)

filename.ext(1) - this is the actual requested file (70.5M)

Extra Note: jhipster application running in production mode deployed on a Tomcat application server.

question from:https://stackoverflow.com/questions/65934335/downloading-file-using-httpclient-and-file-saver-js-fetches-jhipster-app-loading

Answer 1

Waitting for answers