Extra character is gettting added in API URL in angular

Question

Environment file

export const environment = {
    production: false,
    name: 'local',
    apiUrl: 'https://dev.xyz.com/v1',
};

API service

login(input: ILogin): Observable<any> {
    Common.showConsoleLog('demoAPIReq', input);
    const url1 = 'https://dev.xyz.com/v1/auth/login'
    const url = `${environment.apiUrl}${consts.LOGIN}`;
    return this.http.post(url, input, { 
        headers: Common.authHeader(), observe: 'response'
    }).pipe(tap (data => Common.showConsoleLog('demoAPIRes', data)),
    catchError(this.handleError('login'))
);

Common file

static authHeader(): any {
    const httpBearerOptions = {
        headers: new HttpHeaders({
            'Content-Type': 'application/json',
        }),
    };
    return httpBearerOptions.headers;
}

Const file

export const consts = {
    ROUTE_HOME: 'home',
    ROUTE_LOGIN: 'login',
    ROUTE_REGISTER: 'register',
    ROUTE_DASHBOARD: 'dashboard',
    LOGIN: '​/auth/login',
};

If I pass url1 in post api then its working fine , Also const url3 = environment.apiUrl + '/auth/login'; is also working but I concate string as in const url = `${environment.apiUrl}${consts.LOGIN}`; then its add some weird extra character in url when I checked into network tab as like below

Answer 1

It's not clear what consts.LOGIN is, but that looks like the problematic area. The "extra characters" you are seeing in the URL is the URL encoded version of consts.LOGIN, so you may need to fix that value or make it encode/decode where necessary.

const someVal = "some value with spaces";
const encoded = encodeURIComponent(someVal);
const decoded = decodeURIComponent(encoded);
console.log('encoded', encoded);
console.log('decoded', decoded);

I also believe that you want to add a / in the URL you're trying to build:

const url = `${environment.apiUrl}${consts.LOGIN}`;

should probably be:

const url = `${environment.apiUrl}/${consts.LOGIN}`;