Angular: memory leak after simultaneous loading?

Question

I am developing an Angular application and I created the download page as follows:

If I look at the Chrome task manager, I see that the process associated with my application stores about 130 MB of memory.

Then, users can start simultaneous downloads by pressing each download button (total file size is 266 MB):

Now, if I check the task manager again, I see that the memory usage has increased, and when all the downloads are finished, its peak is about 650 MB. I noticed a strange thing: the ultimate memory usage seems to be the sum of the following formula:

original memory usage + 2 * total file size = final memory usage

130 MB + 2 * 266 MB = 130 MB + 532 MB = 662 MB = ~ 650 MB.

Chrome, 30 , 620 . , ? - ? ( unsubscribe Component ngOnDestroy, )

, ( ):

getFile(file: any): void {
    this.fileDownloadService.downloadFile(file).subscribe(
        (fileinfo: SispFile) => {
            file.downloading = true;
        },
        (err: any) => {
            file.downloading = false;
            console.log('errore', err);
        },
        () => {
            file.downloading = false;
            console.log('completated');
        });
}

downloadFile FileDownloadService, getFile:

downloadFile(file: SispFile): Observable<any> {
    let conf: any = {};
    conf.totalChunks = Math.max(Math.ceil(file.size / this.chunkSizeDownload), 1);
    conf.mime = file.extension;
    conf.currentChunk = 0;
    conf.byteDownloaded = 0;
    conf.chunkSizeDownload = this.chunkSizeDownload;
    conf.chunkBlobs = [];
    conf.finalBlob = null;

    file.progress = 0;

    return new Observable(observer => {
        observer.next(file);
        this.addChunk(file, observer, conf);
    })
}

addChunk(file: SispFile, observer: any, conf: any) {
    if (conf.currentChunk == conf.totalChunks) {
        observer.complete();
        conf.finalBlob = new Blob(conf.chunkBlobs, {type: conf.mime});

        let fileURL = URL.createObjectURL(conf.finalBlob);
        let a = document.createElement("a");
        a.href = fileURL;
        a.download = file.name;
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(fileURL);
    } else {
        this.docService.downloadFile(file, conf.chunkSizeDownload, conf.byteDownloaded)
            .then(response => {
                let typedArray = this.createBlob(response['_body'], conf.mime);
                conf.chunkBlobs[conf.currentChunk] = typedArray;
                conf.currentChunk++;
                conf.byteDownloaded = conf.currentChunk * conf.chunkSizeDownload;
                if (conf.Downloaded + this.chunkSizeDownload > file.size) {
                    conf.chunkSizeDownload = file.size - conf.Downloaded + 1;
                }

                let progress = Math.round((conf.currentChunk * 100) / conf.totalChunks);
                file.progress = progress;
                observer.next(file);
                this.addChunk(file, observer, conf);
            })
            .catch((error: ErrorMessage) => {
                observer.error(error);
                console.log('Errore server: ' + error);
            });
    }
}

DocService:

downloadFile(file: SispFile, length: number, offset: number) {
    let url = Util.format(this.downloadFileUrl, {id: file.id});
    let body: any = { "downloadMode": "PAYLOAD", "fileId": file.id, "length": length, "offset": offset };
    return this.http.post(url, body)
        .toPromise()
        .then(response => {
            return response;
        })
        .catch(this.handleError);
}

Answer 1

, Angular Testability . :

, . , "". Angular Testability.

Testability TestabilityRegistry.

, , Testability API .

, , TestabilityRegistry , , 620 .

, !

, , , , !

Update:

, , TestabilityRegistry:

modules/@ angular/core/src/testability/testability.ts:

destroy(): void {
  this._applications.clear();
  testabilityGetter.onDestroy();
}

destroy.

modules/@ angular/core/src/application_ref.ts:

this._injector.get(TestabilityRegistry).destroy();

destroy.

modules/@ angular/platform-browser/src/browser/testability.ts:

onDestroy(): void {
   delete global.getAngularTestability;
   delete global.getAllAngularTestabilities;
   delete global.getAllAngularRootElements;
   delete global.frameworkStabilizers;
}

, .

this commit. , TestabilityRegistry.