Type 'HttpEvent<{}>' is not assignable to type 'HttpEvent<Event>'.

[aulona2014]

I tried this but for me doesn't function

  postUrl = '(Api.getUrl(Api.URLS..........)';
  myFormData: FormData ;//populated by ngfFormData directive
  httpEvent: HttpEvent<Event>;

  uploadFiles(files:File[]) : Subscription {
    const config = new HttpRequest('POST', this.postUrl, this.myFormData), {
      reportProgress: true
    }) // exception [ts] Cannot redeclare block-scoped variable '(Missing)'.
    
    return this.HttpClient.request( config )
    .subscribe(event=>{
      this.httpEvent = event //exception Type 'HttpEvent<{}>' is not assignable to type 'HttpEvent<Event>'.
      
      if (event instanceof HttpResponse) {
        alert('upload complete, old school alert used')
      }
    },
    error=>{
      alert('!failure beyond compare cause:' + error.toString())
    })
  }

[AckerApple]

Package is used in production by many.

This package covers selecting files and aides in giving you those selection in portable formats such as FormData.

Much evidence suggest you are new at this and most likely are approaching this incorrectly. I'm sorry, the code is free but my time is not.... Search this issues in this package.

Good luck.

[chenglabs]

This should solve the problem

  uploadFiles(files: File[]): Subscription {
    const req = new HttpRequest<FormData>('POST', this.url, this.sendableFormData, {
      reportProgress: true  // , responseType: 'text'
    });

    return this.httpEmitter = this.http.request<Event>(req)
    .subscribe(
      event => {
        this.httpEvent = event;

        if (event instanceof HttpResponse) {
          delete this.httpEmitter;
          console.log('request done', event);
        }
      },
      error => { console.log('Error Uploading', error); }
    );
  }

[adamespii]

Unsure if OP resolved issue, but for future reference for others this is how I resolved the error:
https://stackoverflow.com/questions/45375476/angular-4-cannot-find-name-httpclient

Essentially make sure that you imported HttpClientModule into app.module.ts and that it's also under your @NgModule imports.

In addition, be sure that your ExampleComponent.ts (file you're using the upload function) has the import { HttpClient } from from '@angular/common/http'; .

Other than that, make sure your syntax matches that within the function. My ExampleComponent.ts has this:
httpEmitter:Subscription
httpEvent:HttpEvent<Event>
constructor(public HttpClient:HttpClient){}

uploadFiles(files: File[]): Subscription {
const req = new HttpRequest('POST', this.url, this.sendableFormData, {
reportProgress: true // , responseType: 'text'
});

return this.httpEmitter = this.HttpClient.request<Event>(req)
.subscribe(
  event => {
    this.httpEvent = event;

    if (event instanceof HttpResponse) {
      delete this.httpEmitter;
      console.log('request done', event);
    }
  },
  error => { console.log('Error Uploading', error); }
);

}

[lreb]

Thanks, this work for me:

return this.httpEmitter = this.HttpClient.request<Event>(req)

[AckerApple]

I have now done research into this, the correct approach is to data type the httpEvent exactly as Angular has. For the code in question, the fix is to just simply data type this.httpEvent as httpEvent:HttpEvent<{}>

Angular seems to truly data type it's HttpEvent results exactly as HttpEvent<{}>

I will update all example in regards to this to reflect HttpEvent<{}> instead of HttpEvent<Event>