How to make a string constant in angular 4?

Question

In my service, I am using a http post. I want to set the URL as a constant.

return this.http.get(this.config.API_URL+'users', options).map(res=>res.json());

I tried with a service:

import {Injectable} from '@angular/core';

@Injectable()
export class AppService {
  API_URL :String;

  constructor() {
    this.API_URL = 'some url';
  }
}

Is there any other method to make a constant value in Angular4 ?

Possible duplicate of [Define global constants in Angular 2](http://stackoverflow.com/questions/34986922/define-global-constants-in-angular-2) — elvin, May 11 '17 at 13:46

score 44 · Accepted Answer · answered May 11 '17 at 13:42

44

I'm not sure if i understand your question but if you want to create constants, you can do it in a different class and import it.

constants.ts

export class Constants {
  public static get HOME_URL(): string { return "sample/url/"; };
}

sample.component.ts

   import { Constants } from "./constants";
    @Component({

    })
     export class SampleComponent {
      constructor() {
       let url = Constants.HOME_URL;
      }
    }

answered May 11 '17 at 13:42

Cory

929
12
19

how to call like this? `const USER_AUTH_API_URL = '/api-url';` – Velusamy Venkatraman Jul 14 '19 at 13:52

score 34 · Answer 2 · edited May 23 '17 at 12:26

You can simply export a constant using es6/typescript modules if that's all you need:

constants.ts:

export const API_URL: string = 'api/url';

And import where needed:

import { API_URL } from './constants.ts';

...

return this.http.get(API_URL+'users', options)
                .map(res=>res.json());

or if you have many constants you can import them all:

import * as constants from './constants.ts';

...

return this.http.get(constants.API_URL+'users', options)
                    .map(res=>res.json());

If you want to make your constants configurable per application on startup, you can use providers. Check out the top answer in this link: how do I get angular2 dependency injection to work with value providers

If the constant happens to be an object, you can wrap it in a `Object.freeze({ ... })`` to make it a real constant. — Jeffrey Roosendaal, Mar 27 '18 at 14:32

Chanuka Asanka · Answer 3 · 2019-03-28T17:04:54.500

Define app constant as public static readonly as below

public static readonly constName = 'Consts Value'

/app-constants.ts

export class Constants {

     public static readonly routeAuthRegister = '/auth/register';
     public static readonly routeAuthLogin = '/auth/login';
     public static readonly routeAuthRecovery = '/auth/forgot-password';

}

/api-constants.ts

It's better to keep your base URI's in enverment files. and define your environments in apps in .angular-cli.json. i here attache screen shot below for define custom app environments .

import { environment } from '../../environments/environment';

export class ApiURIs {

    public static readonly apiURL: string = environment.apiEndpoint;
    public static readonly apiV1: string = environment.apiEndpoint + '/v1';
    public static readonly apiV2: string = environment.apiEndpoint + '/v2';


    public static readonly login: string = ApiEndpoints.apiV1 + '/login';
    public static readonly register: string = ApiEndpoints.apiV1 + '/register';
    public static readonly signup: string = ApiEndpoints.apiV2 + '/register';

}

Usage of constants

/core/auth.service.ts

import { ApiURIs } from './api-constants';

@Injectable()
export class AuthService {
    .....

    signUpUser(data) {
        return this.https.post(`${ApiURIs.signup}`, data);
    }

    .....
}

/auth/login.component.ts

export class LoginComponent implements OnInit {
   .....

   navigateToForgotPassowrd() {

        this.router.navigate([Constants.routeAuthRecovery]);
   }
   ......
}

Define your different API URI's for different environment

How to make a string constant in angular 4?

3 Answers3

Linked