Resolve both issues like:

1.Selecting "none" or "lzma" compression type shouldn't pass a compression level of "None".
2.The export window waits for the project to be downloaded when exporting a large project with images

src/app/components/export-portable-project/export-portable-project.component.html

@@ -31,7 +31,7 @@
       <div class="col-md-4 col-data">Compression level:</div>
       <div class="col-md-8">
         <mat-form-field class="input-full-width">
-          <mat-select formControlName="compression_level" required>
+          <mat-select formControlName="compression_level">
             <mat-option *ngFor="let compressionLevel of compression_filter_value" [value]="compressionLevel">{{
               compressionLevel
             }}</mat-option>
@@ -65,7 +65,7 @@
   <div class="row">
     <div class="col-md-12">
       <div mat-dialog-actions align="end">
-        <button mat-button type="submit" cdkFocusInitial>Export</button>
+        <button mat-button type="submit" [disabled]="isExport" cdkFocusInitial>Export</button>
         <button type="button" mat-button (click)="dialogRef.close()" cdkFocusInitial>Cancel</button>
       </div>
     </div>

src/app/components/export-portable-project/export-portable-project.component.ts

@@ -2,6 +2,8 @@ import { Component, Inject, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { FileItem, FileUploader, ParsedResponseHeaders } from 'ng2-file-upload';
+import { Observable, of } from 'rxjs';
+import { catchError } from 'rxjs/operators';
 import { Project } from '../../models/project';
 import { Server } from '../../models/server';
 import { ProjectService } from '../../services/project.service';
@@ -23,6 +25,7 @@ export class ExportPortableProjectComponent implements OnInit {
   project: Project;
   index: number = 4;
   fileName: string;
+  isExport:boolean = false
 
   constructor(
     public dialogRef: MatDialogRef<ExportPortableProjectComponent>,
@@ -64,7 +67,7 @@ export class ExportPortableProjectComponent implements OnInit {
   formControls() {
     this.export_project_form = this._fb.group({
       compression: ['', Validators.required],
-      compression_level: ['', Validators.required],
+      compression_level: [''],
       include_base_image: [false, Validators.required],
       include_snapshots: [false, Validators.required],
       reset_mac_address: [false, Validators.required],
@@ -86,20 +89,21 @@ export class ExportPortableProjectComponent implements OnInit {
   }
 
   exportPortableProject() {
-    let response;
+    this.isExport = true
     this.export_project_form.value.compression = this.export_project_form.value.compression.value ?? 'zstd';
-    this.projectService
+    const object =  this.projectService
       .exportPortableProject(this.server, this.project.project_id, this.export_project_form.value)
-      .subscribe((res) => {
+      .pipe(catchError((error) => of(error)));
-        response = res;
+      object.subscribe((res)=>{
-        const url = window.URL.createObjectURL(new Blob([response]));
+        const url = window.URL.createObjectURL(new Blob([res]));
         const link = document.createElement('a');
         link.href = url;
         link.setAttribute('download', this.fileName);
         document.body.appendChild(link);
         link.click();
         document.body.removeChild(link);
+        this.isExport = false
         this.dialogRef.close()
-      });
+      })
   }
 }

src/app/services/project.service.ts

@@ -20,10 +20,10 @@ export class ProjectService {
     { id: 5, value: 'zstd', name: 'Zstandard compression' },
   ];
   compression_level_default_value: any = [
-    { id: 1, name: 'none', value: 'None', selectionValues: ['None'] },
+    { id: 1, name: 'none', value: '', selectionValues: [] },
     { id: 2, name: 'zip', value: 6, selectionValues: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] },
     { id: 3, name: 'bzip2', value: 9, selectionValues: [1, 2, 3, 4, 5, 6, 7, 8, 9] },
-    { id: 4, name: 'lzma', value: 'None', selectionValues: ['None'] },
+    { id: 4, name: 'lzma', value: ' ', selectionValues: [] },
     {
       id: 5,
       name: 'zstd',
@@ -136,6 +136,11 @@ export class ProjectService {
     return this.compression_level_default_value;
   };
   exportPortableProject(server:Server, project_id: string,formData:any={}) {
-    return this.httpServer.getBlob(server,`/projects/${project_id}/export?include_snapshots=${formData.include_snapshots}&include_images=${formData.include_base_image}&reset_mac_addresses=${formData.reset_mac_address}&compression=${formData.compression}&compression_level=${formData.compression_level}`)
+    if (formData.compression_level != null && formData.compression_level !='') {
+      return this.httpServer.getBlob(server,`/projects/${project_id}/export?include_snapshots=${formData.include_snapshots}&include_images=${formData.include_base_image}&reset_mac_addresses=${formData.reset_mac_address}&compression=${formData.compression}&compression_level=${formData.compression_level}`)
+    } else {
+      return this.httpServer.getBlob(server,`/projects/${project_id}/export?include_snapshots=${formData.include_snapshots}&include_images=${formData.include_base_image}&reset_mac_addresses=${formData.reset_mac_address}&compression=${formData.compression}`)
+
+    }
   }
-}
+}