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

Can you please identify the TypeScript type associated with the return value of the match() method in String prototype?

I need help with creating a Regex in JavaScript const pattern = /S(\d+)E(\d+)/; // identifying characters between "S" and "D" const result = 'SE01E09'.match(pattern); How should I declare the result variable? I have attempted various ...

javascripttypescriptmatch

Arranging mat-checkboxes in a vertical stack inside a mat-grid-tile component of a mat-grid-list

I'm looking to create a grid list with 2 columns, each containing 2 checkboxes stacked vertically. While I found this helpful question, it still involves a lot of nested divs. Is there a cleaner way to achieve this layout? Here's how I currentl ...

htmlcssangularangular-material

Troubleshooting: Angular CLI project encountering issues on Internet Explorer

Today, I encountered an issue when attempting to create a new project using the Angular CLI. An exception is thrown on IE11 and the console displays the following error message: SCRIPT5007: Unable to get property 'call' of undefined or null ref ...

javascriptangular

Is there a way to specify patternProperties in a JSON schema and then map it to a TypeScript interface?

I'm in the process of developing a TypeScript interface that corresponds to a JSON schema. The specific field in my JSON schema is as follows: "styles": { "title": "Style Definitions", &qu ...

jsontypescriptjsonschema

When submitting a form, the MEAN STACK backend is storing the objectId and __v : 0 in MongoDB

Currently, I am developing a small CRUD application using the MEAN STACK framework. My goal is to create a form that allows me to store book information in MongoDB. However, upon submission, I noticed that instead of saving the book's details, the dat ...

node.jsangularmongodbmongoosemean-stack

Unable to utilize material tabs in this situation

Discovering the material tabs feature at https://material.angular.io/components/tabs/api#MatTab got me excited to implement it in my project. After adding the suggested import, I encountered an issue where I couldn't find the module "@angular/materia ...

javascriptangulartypescriptangular-material

Different Types of Props for Custom Input Components using React Hook Form

Struggling with creating a custom FormInput component using React Hook Form and defining types for it. When calling my component, I want to maintain autocompletion on the name property like this ... <FormInput control={control} name={"name"}& ...

reactjstypescriptreact-nativereact-hook-formtyping

Break down Angular modules into smaller parts with the help of webpack

As I work on breaking down a huge Angular project with numerous components, I'm faced with the challenge of dealing with this large module that ideally shouldn't be there in the first place. Unfortunately, due to the current stage of the project, ...

angularwebpack

The argument provided needs to be a function, but instead, an object instance was received, not the original argument as expected

I originally had the following code: const util = require('util'); const exec = util.promisify(require('child_process').exec); But then I tried to refactor it like this: import * as exec from 'child_process'; const execPromis ...

javascripttypescriptrequirees6-modules

When comparing TypeScript class functions with regular functions and variables, which one yields better performance?

When it comes to defining functions, is it better to use variables or functions directly? Also, how does this affect tree-shaking? I am dealing with a lot of calculation-intensive helper classes and I am unsure about the optimal approach in terms of memor ...

javascripttypescriptfunctionclasstree-shaking

Defining types for functions that retrieve values with a specified default

My method aims to fetch a value asynchronously and return it, providing a default value if the value does not exist. async get(key: string, def_value?: any): Promise<any> { const v = await redisInstance.get(key); return v ? v : def_value; } W ...

javascripttypescript

Encapsulating constructor variables in TypeScript classes through private access modifiers and using public getters

Coming from a background in C#, I am used to designing most of my classes to be immutable. I am curious about whether it is considered good practice in TypeScript to use private constructor variables and public getters for accessing data within classes. T ...

typescriptangularimmutability

Error: Trying to access 'items' property of an undefined variable leads to a TypeError

I am currently working on creating a webpage with Angular 8 that fetches data from a REST API in JSON format by passing the request ID. My goal is to display this data in an HTML table that I have created. However, I encountered the following error: Typ ...

htmlangulartypescript

Chrome stack router outlet and the utilization of the Angular back button

I'm experiencing an issue with the back button on Chrome while using Angular 14. When I return to a previous page (URL), instead of deleting the current page components, it keeps adding more and more as I continue to press the back button (the deeper ...

htmlangulartypescriptgoogle-chrome-extensionangular14

The functionality of CSS Inline Block display is not displaying inline as expected

I have the following HTML and CSS code, but I am having issues getting the dropdown to display inline. .project Type{ display: inline-block; } <form class="smart-form"> <div class="row"> <div class="col col-sm-6 col-md-2 col-lg- ...

htmlcssangularformsbootstrap-4

Currently, I am working on developing a to-do task manager using Angular 2. One of the tasks I am tackling involves updating the value

I'm facing an issue with managing to-do tasks. I would like to update the value of an option in a select dropdown when the (change) event is triggered. There are 2 components: //app.component.ts //array object this.dataArr[this.counter] = {id: this ...

javascripttypescriptangular

Implementing cursor-based pagination in Next.js API Route with Prisma and leveraging the power of useSWRInfinite

I am working on implementing cursor-based pagination for a table of posts using Next.js API Route, Prisma, and useSWRInfinite. Currently, I am fetching the ten most recent posts with Prisma in a Next.js API Route and displaying them using useSWR, sorted b ...

typescriptnext.jspaginationprismaswr

Struggling with the TypeScript generic syntax for the GroupBy function

Struggling to figure out where I'm going wrong with this TypeScript signature after spending some time on it. I've been working on a group by function: const group = <T>(items: T[], fn: (item: T) => T[keyof T]) => { return items.re ...

typescript

What is the method for acquiring a dynamic angular component instance while conducting a test?

Check out this snippet of code: const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentClass); const dialogElement = document.createElement('some-dialog'); const componentRef = componentFactory.create( ...

angularunit-testingangular-dynamic-components

Passing information from the parent component to its child in Angular 2

I am working on a component that includes a router outlet. In this component, there is a select element that I populate with categories using a service in the ngOnInit lifecycle hook. The component has 3 child routes, and one of them leads to another compo ...

angularcomponentscommunicationinteraction