Скачать или смотреть How to Fix Observable void Not Assignable to Observable HttpEvent any in Angular Uploads

Discover how to resolve the `Observable void ` assignment issue when implementing a progress bar for file uploads in Angular. Learn about the necessary adjustments in your HTTP request code.
---
This video is based on the question https://stackoverflow.com/q/68374114/ asked by the user 'tiana' ( https://stackoverflow.com/u/9549528/ ) and on the answer https://stackoverflow.com/a/68374270/ provided by the user 'Michael D' ( https://stackoverflow.com/u/6513921/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Type 'Observable void ' is not assignable to type 'Observable HttpEvent any ' Type 'void' is not assignable to type 'HttpEvent any '

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Fixing Observable<void> Not Assignable to Observable<HttpEvent<any>> in Angular Uploads

When working with file uploads in Angular, you might encounter a frustrating error message: "Type 'Observable void ' is not assignable to type 'Observable HttpEvent any '". This typically happens when trying to implement a progress bar for uploads, and may leave you puzzled, especially if you notice that event.type is undefined.

In this guide, we will diagnose the problem and provide a clear and practical solution to fix this issue.

Understanding the Problem

The error essentially stems from the way you're handling observables and promises in your file upload function. Here’s a breakdown of what likely went wrong:

Incorrect usage of RxJS operators: You're not using the pipe function properly with the right operators.

Confusion between Observable and Promise: You declared the return type as Observable<HttpEvent<any>> but converted the observable to a promise using toPromise(). This can lead to issues since you're expected to return an observable type.

The Solution

To resolve the error, we will need to modify the uploadfile function.

Step-by-Step Guide

Remove the use of toPromise(): Instead of converting your observable to a promise, you should stick with observable conversions.

Use tap Operator: Use the tap operator for side effects like success messages instead of converting to a promise.

Here is the corrected code:

[[See Video to Reveal this Text or Code Snippet]]

Key Changes Explained

concatMap Usage: This is utilized to flatten the observables and ensure that data flows correctly through your observable chains.

Removing toPromise(): This ensures you are consistently working with observable streams.

Adding observe: "events": This is crucial to track the different stages of the upload process, such as progress and response when the upload is complete.

Conclusion

By understanding the intricacies of observables and how to handle them properly in your Angular application, you can effectively implement features such as upload progress bars without running into type assignment issues. Follow the steps outlined above to make your file upload function work seamlessly.

If you have any further questions or need additional help, feel free to leave a comment below!