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.

- http://dangularv6 is where my angular page is.
- http://dagilitywebv2/api/V2Startup?userid=TES0049 is service I am trying to call.
- 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.
- 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) { }