Angular 6, httpclient 404 error. GET URL getting automatically changed

Viewed 718

I have a very strange error. Spent hours trying to fix it, but still no clue. I will explain a very basic version of the problem i am having. I have a simple angular page, calling a REST service on init, the returned data will be used to fill some menu options..

Below code works fine.

ngOnInit() {
    //this.Envi.BaseLink + `api/V2Startup?userid=${this.Envi.Userid}`

    this.http.get('http://dagilitywebv2/api/V2Startup?userid=TES0049').pipe(

    map((data: any) => ({
        Locations: data.Locations,
        MenuItems: (<any[]>data.Menu).map(mnu => ({ GroupName: mnu.GroupName, MenuList: mnu.MenuList, ExpandTree: true }))
        })),

  ).subscribe((data: any) => {
          this.Locations = data.Locations;
          this.MenuItems = data.MenuItems;
  });

 }

But if I replace the hard coded URL with

this.Envi.BaseLink + `api/V2Startup?userid=${this.Envi.Userid}`

I get a 404 error. Initially my impression was this.Envi.BaseLink did not have the right value so I did a console.log,

console.log(this.Envi.BaseLink + `api/V2Startup?userid=${this.Envi.Userid}`);
this.http.get(this.Envi.BaseLink + `api/V2Startup?userid=${this.Envi.Userid}`).pipe

Below is what I see. console.log printed the correct URL. But to my $http.get the dev domain of my site is getting added, i.e. it is treating the address as relative to my root. enter image description here

  1. http://dangularv6 is where my angular page is.
  2. http://dagilitywebv2/api/V2Startup?userid=TES0049 is service I am trying to call.
  3. But when this.http.get is getting called. Some how it is making a call to http://dangularv6/dagilitywebV2//api/V2Startup?userid=TES0049, i.e. it is treating it as relative URL.
  4. If I hard code again with http://dagilitywebv2/api/V2Startup?userid=TES0049 it works fine.

This same code works fine when i run my angular app locally (localport:4200), But when i move it to dev server to run under http://dangularv6, $http.get adds this prefix to my service URL.

I have no clue why it is happening.. any help?

UPDATE: environment.ts

export const environment = {
production: false,
baselink: 'http://dagilitywebv2.lkq.lkqx.net/',
};

Injectable class

@Injectable({providedIn: 'root'})
export class UserEnvironment {
    constructor() {this.BaseLink = environment.baselink;}
}

In component

import { UserEnvironment } from '../app-constants';
constructor(private http: HttpClient, private Envi: UserEnvironment) { }
1 Answers

Your Envi Baselink must be broken, since the get is trying to go to http://dangularv6/dagilitywebv2//

Maybe you need a BaseUrl for your client and another one for your server in your Envi so you can use instead of only BaseUrl, a BaseUrl in some cases, and ServerUrl in others

I might be wrong though

Related