Base URL for making Http Requests in an Angular application

I am currently working on an angular application that is hosted on a test server running IIS with a .net core backend. The application is set up on a virtual directory, for example www.myTestApp/crm (the actual domain name being fictional). During the build process, I use the command ng build --base-href "/CRM" --deploy-url "/CRM/" --prod.

However, I have noticed that my Http Requests from the angular app are sending requests from www.mytestapp.com/ instead of www.mytestapp.com/crm. I am curious to understand how Angular determines the base URL in this scenario even though I have clearly specified /crm during the build.

An example of one of my http requests can be seen below:

return this.http
            .get("/api/users/IsOutboundAgent")
            .pipe(map((data: any) => {
                this.isOutboundAgent = data;
                return this.isOutboundAgent;
            }));

One possible solution would involve setting a global variable before each http request based on environment variables or using an http intercept. Nevertheless, I am intrigued by why the "crm" part is excluded. Could it be that Angular defaults to using just the domain name when no path is specified?

Answer №1

The issue stemmed from an extraneous leading slash in my http request, causing the URL to be relative to the website root and disregarding the /crm section.

Additionally, I discovered the importance of including a trailing slash when defining the base tag.

Understanding Relative URLs with Base Tag

Best Practices for Relative URLs

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

Executing JSON into XML conversion steps

I am currently facing an issue with parsing a Json into XML using the "Newton-King" library and its method JsonConvert.DeserializeXmlNode(json). Here is the Json data: { "ISDCode":"TestISD", "retailerCode":"RT148", "count":"2", "salesdata":[ ...

Strategies for effectively choosing this specific entity from the repository

Is it possible to choose the right entity when crafting a repository method using typeorm? I'm facing an issue where I need to select the password property specifically from the Admin entity, however, the "this" keyword selects the Repository instead ...

Implement a nested feature within the Accordion component

I am currently working on a project using Next.js and TypeScript. Within this project, I have implemented an accordion component as shown below: import React, { useEffect, useState } from 'react'; import classes from './Accordion.module.scss ...

Testing the throwing of errors when running Karma by utilizing sinon.spy on global functions like parseInt

I'm currently facing an issue with monitoring the usage of parseInt within my function. This is a Proof of Concept for integrating TypeScript into our company's workflow. I've tried following two different tutorials on testing Sinon, but no ...

Fetching Data from Response Headers in Angular 4.3.3 HttpClient

(Text Editor: Visual Studio Code; TypeScript Version: 2.2.1) The main objective here is to fetch the headers of the response from a request Let's consider a scenario where we make a POST request using HttpClient within a service: import { Injec ...

Having trouble resolving modules after generating tsconfig.json?

I recently added a tsx component to my next.js 13 project following the documentation. After creating the required tsconfig.json file, I encountered module not found errors when running npm run dev: $ npm run dev > [email protected] dev > n ...

The attribute 'modify, adjust, define' is not found in the 'Observable<{}>' type

After attempting to follow a tutorial on Angular + Firebase, I encountered some issues with version compatibility. The tutorial was based on Angular 4, but my current version is Angular 6. Additionally, the versions of Firebase and AngularFire2 that I am u ...

Generate a new content hash in ngsw after compiling or while deploying

Our Angular application utilizes the angular service worker to enhance performance. The service worker compares content hashes of cached files with those in the ngsw.json file. We have implemented continuous integration and delivery (with Azure DevOps) w ...

Nestjs opts to handle invalid routes by throwing a NotFoundException rather than a MethodNotAllowed

I've recently developed a Rest API using NestJS and now I'm focusing on customizing error responses. Specifically, I want to address the scenario where a user calls an endpoint with the incorrect HTTP method. Take for instance the endpoint GET / ...

Exploring the Integration of .NET ASMX Web Services with PHP

WebService URL: Method Name: Login Parameters: (username, password) WebService was developed using .NET framework. I am invoking this web service using a SOAP library. The data returned will be in JSON format. I encountered an error message stating tha ...

What is the best way to overload a function based on the shape of the argument object in

If I am looking to verify the length of a string in two different ways (either fixed or within a specific range), I can do so using the following examples: /* Fixed check */ check('abc', {length: 1}); // false check('abc', {length: 3}) ...

What steps should I take to update my local database using a web service in the case of an item not being found?

In the project I am currently working on, there is a database and a web service that serves as the source of data. One particular question that I have pertains to the scenario where I input a product number into textBox1. I want to check if this number alr ...

Downcasting on "this" is not supported in Typescript

In the example below, the TypeScript compiler does not allow for a direct cast of this to Child. However, it is possible to achieve this using an intermediate variable like 'temp' or double casting as shown in the commented lines. Is this behavio ...

Modify associated dropdown menus

I am trying to create an edit form that includes dependent select fields (such as country, state, city). The issue I am facing is that the edit only works when I reselect the first option (car brand) because I am using the event (change) with $event. How c ...

Dealing with ObjectUnsubscribedError in RxJS subscriptions with Angular

In my application, I have a service that manages several BehaviorSubject objects which are subscribed to by the main component. These subjects receive data from the backend and are utilized by the component through subscription. To prevent memory leaks, I ...

Ways to modify the input field value in my form based on the current page context

I am currently developing a website for a sports event organization company using Angular, HTML/CSS. The focus of this website is on the triathlon sport and it consists of several stages. On the home page, there are five image tags representing each stage ...

An issue occurred when retrieving the input value during a (change) event within a nested *ngFor loop in Angular

Within my table, I have implemented a nested loop using the *ngFor directive: <tbody> <tr *ngFor="let dept of salesTarget; let i = index"> <td>{{dept.dept}}</td> <td *ngFor="let month of monthList; ...

"Customize the appearance of ng-bootstrap datepicker selection with a unique

Having trouble with the ng-bootstrap datepicker when selecting style for month and year. https://i.sstatic.net/grlK6.png The issue seems to be with the select style. select[_ngcontent-c21] { -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 0 .5re ...

What are the steps for implementing angular DataTable?

Currently working with Angular 6 and trying to implement an Angular data table, but encountering the following error. Need assistance in resolving this issue and implementing the Angular data table successfully. Encountering the error shown below: ERROR ...

Issue encountered while deploying MVC web system on Windows Server 2008

I encountered an error when inspecting my MVC 5 websystem in Google Chrome after publishing it. Here is the code that I added to my View: @model abc.def.Models.ClsSECEditors @{ ViewBag.Title = "Index"; } <style type="text/css"> .deleteLi ...