Error 404 is displayed when using Angular http.head on asset

I developed a new service that can verify the existence of a file.

fileExists(path: string): Observable<boolean> {
    return this.http.head(path)
        .mapTo(true)
        .catch((error) => {
            console.log(error);
            return Observable.of(false);
        });
}

In one of my directories, I have an important pdf file located at: /assets/text/text.pdf

Interestingly, when I try to access the pdf file through the browser url, it displays without any issues. However, when I use my newly created file verification service with the same path, I receive a 404 error

HttpErrorResponse {
     headers: HttpHeaders,
     status: 404,
     statusText: "OK",
     url: "https://localhost:4200/assets/text/text.pdf",
     ok: false, 
}

UPDATE: After switching from using head method to get, I encountered an error message - "Unexpected token % in %PDf..." which seems to indicate that the PDF content was found.

For more information on this issue, check out: https://github.com/angular/angular-cli/issues/5170

If you happen to know a solution for this problem...

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

Customizing TinyMCE's font style menu options

Our platform utilizes TinyMCE as in-place editors to allow users to make live edits to content. However, a challenge arises when using a dark background with light text, as TinyMCE defaults to using this text color rather than black. https://i.sstatic.net ...

Utilizing a nested interface in Typescript allows for creating more complex and

My current interface is structured like this: export interface Foo { data?: Foo; bar?: boolean; } Depending on the scenario, data is used as foo.data.bar or foo.bar. However, when implementing the above interface, I encounter the error message: Prope ...

Navigating to the end of a list using Angular's scroll feature

I'm trying to figure out how to automatically scroll to the bottom of a list in TypeScript, can someone help me with this? Here's a similar example I found that uses jQuery (I specifically need it in TypeScript): Scroll to bottom of list wit ...

Exploring the NextPage type in Next.js

Could someone provide an explanation of the NextPage type within a Next.js TypeScript project? Most sources mention that it is used for type assignment in Next.js, but I am curious about its practical purpose. When and why should we utilize this type? Wha ...

Enhance Your NestJS Experience: Using Interceptors for Mapping and Error Handling

I'm looking for a NestJS interceptor that can log requests in all scenarios, including both successful executions and errors. Below is an example implementation: public intercept(context: ExecutionContext, next: CallHandler): Observable<any> { ...

Angular package that includes horizontal scrolling functionality with arrow buttons

Currently seeking an Angular 2-6 package featuring a horizontal image scroll with arrows, similar to the functionality on Airbnb: https://i.sstatic.net/BOWzD.jpg Any suggestions or recommendations are greatly appreciated – thank you! ...

Tips for determining if an HTMLElement has already been created

One issue I'm facing is with a third party component that emits an "onCellEdit" event and passes a cell element as a parameter. My goal is to automatically select the entire text in the input element generated inside this cell when the event occurs. ...

Learn how to open a component in a new browser tab using Angular from a different component

I wish to display the MapComponent in a new browser tab when a button in my AppComponent html file is clicked. Currently, when I click the button, the MapComponent opens in a new tab but it also displays the button. How can I configure it so that only the ...

The ultimate guide to passing slots from Parent to Child Components seamlessly using PrimeVue

As I venture into creating my own component library by wrapping some PrimeVue components, I am faced with the challenge of handling numerous slots. Many PrimeVue components come with a large number of slots, and passing each one individually seems like a ...

Converting a file into a string using Angular and TypeScript (byte by byte)

I am looking to upload a file and send it as type $byte to the endpoint using the POST method My approach involves converting the file to base64, and then from there to byte. I couldn't find a direct way to convert it to byte, so my reasoning may be ...

Issue: When attempting to list the FormArray of FormGroups in Angular, an error occurs stating "ERROR TypeError: Cannot read property 'invalid' of undefined"

Looking for a way to customize items based on client preferences, I decided to develop a form where users can input multiple items and specify details for each one. To achieve this, I needed to create a FormArray of FormGroup. While everything seemed to be ...

I am having issues with the Okta Angular sign-in widget as it is not redirecting

Recently, I integrated the Okta angular sign-in widget into my project, but I encountered an issue. In my application, I have multiple modules including an authentication module that manages sign-in, sign-out, and sign-up functionalities. The route I ult ...

Updating the alignment between two input mat-select in Angular materialAlternatively:Fine-tuning the reference between

I am currently working on an Angular 6 app: I have two mat-select inputs that I want to connect in a way that if the selected option in my First select is equal to the value 'AAA', then the Second select should be hidden. First Mat-Select -> ...

Error occurs in Angular Mat Table when attempting to display the same column twice, resulting in the message "Duplicate column definition name provided" being

What is the most efficient method to display a duplicated column with the same data side by side without altering the JSON or using separate matColumnDef keys? Data: const ELEMENT_DATA: PeriodicElement[] = [ {position: 1, name: 'Hydrogen', wei ...

Exploring the depths of routing within a maze of interconnected modules

Currently, I am developing my first Angular 2 application. The routing structure I have set up is as follows - /home /projects/ /projects/:id/members /projects/:id/members/:id/tasks While researching online resources about this topic, I noticed that mo ...

Include quotation marks around a string in C# to convert it into JSON format

I am utilizing a service that operates with JSON format. However, the JSON data I am receiving does not include double quotes around keys and values. Here is an example of the data I have: [{name:{buyerfirstname:Randy, buyermiddlename:null, buyerlastnam ...

Unable to locate the 'functions scss error within the Angular application

Having recently created a fresh angular 7 application and incorporating scss, I encountered an error after building the application. The style.scss class contains the following import: @import '../node_modules/bootstrap/scss/bootstrap.scss'; I ...

Closing Accordions Automatically

Hello everyone! I'm currently working on a NextJS project and facing an issue with my dynamic accordion component. I'm using typescript, and the problem lies in only one accordion being able to open at a time. How can I ensure that only the spec ...

Ways to rename a sequelize property following a join operation

I am encountering a problem with sequelize ORM. The data returned after joining has a nested object: { "id": 1, "username": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4125342e2f26252e282220 ...

"Error message: Trying to import a component in Angular, but encountering a message stating that the component has no exported

When creating a component named headerComponent and importing it into app.component.ts, an error is encountered stating that 'website/src/app/header/app.headerComponent' has no exported member 'headerComponent'. The code for app.headerC ...