Struggling to Decode Octet-stream Data in Angular 6 HttpClient: Encountering Parsing Failure with Error Prompt: "Failed to parse HTTP response for..."

Is there a way to make a non-JSON request to the server using Angular 6 HttpClient (@angular/common/http) in order to receive an Octet-stream? Below is the code I have tried:

getFile(file: any) {
    let headers = new HttpHeaders({
        'Content-Type':  'application/octet-stream',
        'Accept':'application/octet-stream',
        'Authorization': 'Bearer ' + data.token
    })

    return this.http.get<any>(this.baseUrl + '/getfile/'+file, { headers });
}

However, this code results in a JSON parse error.

"HttpErrorResponse", message: "Http failure during parsing for..... ERROR {…} ​ error: {…} ​​ error: SyntaxError: "JSON.parse: unexpected character at line 1 column 1 of the JSON data"

Can anyone suggest how to retrieve this data as non-JSON?

angulartypescriptangular-httpclient

Answer №1

Here's a suggestion to consider:

const customHeaders = new HttpHeaders({
    'Access-Token': 'Bearer ' + data.token
    });
return this.http.get<any>(this.baseUrl + '/fetchfile/' + file, { headers: customHeaders, responseType: 'blob' });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When is the right time to develop a Node.js application using Typescript with dockerization

Currently, I am developing a full stack TypeScript application using Express for the server and React for the client. The folder structure of my project is organized as shown below: . ├──client/ <-- React app ├──server/ <-- Express serve ...

node.jsreactjstypescriptdockerexpress

Tips for ensuring an animation is triggered only after Angular has fully initialized

Within this demonstration, the use of the dashOffset property initiates the animation for the dash-offset. For instance, upon entering a new percentage in the input field, the animation is activated. The code responsible for updating the dashOffset state ...

javascriptcssangulartypescriptangular-animations

Displaying JSON Object in Kendo UI Grid with Incorrect Format

I encountered an issue where a function that I passed to a Kendo Grid field in the fetch method returns perfectly on console.log, but only [object Object] is returned in the Kendo Grid display. Here's the background: I am utilizing two services - Rev ...

angulartypescriptkendo-grid

Steps to activate Angular Progressive Web App service worker

When I set up an Angular project, I executed the following commands in the terminal: ng add @angular/pwa ng build --prod The static website output was published in the /dist folder. After running the URL through PWABuilder, it detected the manifest bu ...

angularservice-workerprogressive-web-apps

Redis Recursion: The callstack has reached its maximum size limit

Looking for some assistance with creating a game timer. I've decided to utilize Redis and Web Sockets in order to synchronize the timer across multiple devices. However, I'm running into an issue when trying to call my function recursively using ...

javascriptnode.jstypescriptredisnode-redis

Is it possible to enter NaN in Vue3?

Is there a way to handle NaN values and keep a field blank instead when calculating margins with a formula? https://i.stack.imgur.com/JvIRQ.png Template <form> <div class="row"> <div class="mb-3 col-sm ...

javascripttypescriptvue.jsvuejs3

Higher order components enhance generic components

I'm facing an issue where I want to assign a generic type to my React component props, but the type information gets lost when I wrap it in a higher order component (material-ui). How can I ensure that the required information is passed along? type P ...

reactjstypescriptmaterial-ui

Unable to employ the inequality operator while querying a collection in AngularFire

I'm facing a challenge with pulling a collection from Firebase that is not linked to the user. While I've managed to query the user's collection successfully, I am struggling to retrieve the collection that does not belong to the user using ...

angulartypescriptfirebasegoogle-cloud-firestoreangularfire2

Using numerous maps within Ionic applications with the JavaScript SDK

Currently, I am utilizing the Google Maps (Javascript SDK) in Ionic V3 and have successfully created two pages with map views. Interestingly, while the first page displays the map correctly, upon opening the second page, the map shows up with grey lines, ...

angulardictionaryionic-framework

How can I create a custom validator in Angular 2 that trims the input fields?

As a newcomer to Angular, I am looking to create a custom validator that can trim the input field of a model-driven approach form. However, I have encountered difficulties during implementation. When attempting to set the value using setValue() within th ...

javascriptangularvalidation

Access route information external to the router outlet

Can we access the data parameters in a component that is located outside of a router outlet? const appRoutes: Routes = [ { path: '', component: SitesComponent }, { path: 'pollutants/newpollutant', component: PollutantComponent, data: { ...

angularangular5

When trying to reference a vanilla JavaScript file in TypeScript, encountering the issue of the file not being recognized

I have been attempting to import a file into TypeScript that resembles a typical js file intended for use in a script tag. Despite my efforts, I have not found success with various methods. // global.d.ts declare module 'myfile.js' Within the re ...

javascriptreactjstypescriptreact-typescript

Error in validating control groups in Angular 4

I'm currently working on setting up a standard form using Angular reactive forms. Below is the generic HTML code I have for input elements: <div class="form-input form-group" [formGroup]="group"> <div class="row"> <div clas ...

angularangular-reactive-forms

Show a component on click event in Angular 4

Looking for a solution to create an event on a button click that triggers another component? When clicked again, the component should be reduced with a part always remaining visible. While I am currently using [ngClass]='hidden' within the same c ...

angularmouseclick-event

typescriptIs it possible to disregard the static variable and ensure that it is correctly enforced

I have the following code snippet: export class X { static foo: { bar: number; }; } const bar = X.foo.bar Unfortunately, it appears that TypeScript doesn't properly detect if X.foo could potentially be undefined. Interestingly, TypeScript ...

typescript

Setting a blank value or null equivalent to a field: Tips and tricks

Here is the component state that I am working with: interface Person { name: string; surname: string; } interface CompState{ //...fields ... person?: Person; } render() { if(this.state.person){ const comp = <div>{this. ...

reactjstypescript

Why styled-components namespace problem in React Rollup build?

I designed a "UI Library" to be utilized in various projects using ReactJS + TypeScript + styled-components and Rollup. However, I am currently encountering issues with conflicting classNames. I am aware that styled-components offers a plugin for creating ...

javascriptreactjstypescriptstyled-componentsrollupjs

How to redirect to Login page post password update in Angular and Firebase?

Hello, I'm currently working with Angular and Firebase for authentication purposes. I have a quick query: Is there anyone who knows how to set up a redirect to the login page after successfully resetting a password? I have a forgot password page tha ...

angularfirebaseangularfire

How Angular services transmit information to components

I have implemented a search field within my top-bar component and I am facing an issue in passing the input value of that search field to another component. Design Search service Top bar component Result component Operation Top bar component receives th ...

javascriptangulartypescript

Executing the outer function from within the inner function of a different outer function

Imagine this scenario: function firstFunction() { console.log("This is the first function") } secondFunction() { thirdFunction() { //call firstFunction inside thirdFunction } } What is the way to invoke firstFunction from thirdFunction? ...

javascripttypescript