No Angular 1.x, você pode definir constantes assim:

angular.module('mainApp.config', [])
    .constant('API_ENDPOINT', 'http://127.0.0.1:6666/api/')

Qual seria o equivalente em Angular (com TypeScript)?

Só não quero repetir o URL base da API repetidamente em todos os meus serviços.

As alterações abaixo funcionam para mim na versão final do Angular 2:

export class AppSettings {
   public static API_ENDPOINT='http://127.0.0.1:6666/api/';
}

E então no serviço:

import {Http} from 'angular2/http';
import {Message} from '../models/message';
import {Injectable} from 'angular2/core';
import {Observable} from 'rxjs/Observable';
import {AppSettings} from '../appSettings';
import 'rxjs/add/operator/map';

@Injectable()
export class MessageService {

    constructor(private http: Http) { }

    getMessages(): Observable<Message[]> {
        return this.http.get(AppSettings.API_ENDPOINT+'/messages')
            .map(response => response.json())
            .map((messages: Object[]) => {
                return messages.map(message => this.parseData(message));
            });
    }

    private parseData(data): Message {
        return new Message(data);
    }
}

A solução para a configuração fornecida pela própria equipe angular pode ser encontrada aqui .

Aqui está todo o código relevante:

1) app.config.ts

import { OpaqueToken } from "@angular/core";

export let APP_CONFIG = new OpaqueToken("app.config");

export interface IAppConfig {
    apiEndpoint: string;
}

export const AppConfig: IAppConfig = {    
    apiEndpoint: "http://localhost:15422/api/"    
};

2) app.module.ts

import { APP_CONFIG, AppConfig } from './app.config';

@NgModule({
    providers: [
        { provide: APP_CONFIG, useValue: AppConfig }
    ]
})

3) your.service.ts

import { APP_CONFIG, IAppConfig } from './app.config';

@Injectable()
export class YourService {

    constructor(@Inject(APP_CONFIG) private config: IAppConfig) {
             // You can use config.apiEndpoint now
    }   
}

Agora você pode injetar a configuração em qualquer lugar sem usar os nomes das strings e com o uso da sua interface para verificações estáticas.

Obviamente, é possível separar a interface e a constante para poder fornecer valores diferentes na produção e desenvolvimento, por exemplo

No Angular2, você tem a seguinte definição de fornecimento , que permite configurar diferentes tipos de dependências:

provide(token: any, {useClass, useValue, useExisting, useFactory, deps, multi}

Comparando com Angular 1

app.serviceem Angular1 é equivalente a useClassem Angular2.

app.factoryem Angular1 é equivalente a useFactoryem Angular2.

app.constante app.valuefoi simplificado useValuecom menos restrições. ou seja, não há configmais bloqueio.

app.provider - Não há equivalente no Angular 2.

Exemplos

Para configurar com o injetor raiz:

bootstrap(AppComponent,[provide(API_ENDPOINT, { useValue='http://127.0.0.1:6666/api/' })]);

Ou configure com o injetor do seu componente:

providers: [provide(API_ENDPOINT, { useValue: 'http://127.0.0.1:6666/api/'})]

provide é mão curta para:

var injectorValue = Injector.resolveAndCreate([
  new Provider(API_ENDPOINT, { useValue: 'http://127.0.0.1:6666/api/'})
]);

Com o injetor, é fácil obter o valor:

var endpoint = injectorValue.get(API_ENDPOINT);

No Angular 4, você pode usar a classe de ambiente para manter todos os seus globais.

Você possui environment.ts e environment.prod.ts por padrão.

Por exemplo

export const environment = {
  production: false,
  apiUrl: 'http://localhost:8000/api/'
};

E depois no seu serviço:

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

Atualizado para Angular 4+

Agora podemos simplesmente usar o arquivo de ambientes que angular fornece o padrão se o seu projeto é gerado via angular-cli.

por exemplo

Na pasta de ambientes, crie os seguintes arquivos

• environment.prod.ts
• environment.qa.ts
• environment.dev.ts

e cada arquivo pode conter alterações de código relacionadas, como:

• environment.prod.ts

  export const environment = {
       production: true,
       apiHost: 'https://api.somedomain.com/prod/v1/',
       CONSUMER_KEY: 'someReallyStupidTextWhichWeHumansCantRead', 
       codes: [ 'AB', 'AC', 'XYZ' ],
  };

• environment.qa.ts

  export const environment = {
       production: false,
       apiHost: 'https://api.somedomain.com/qa/v1/',
       CONSUMER_KEY : 'someReallyStupidTextWhichWeHumansCantRead', 
       codes: [ 'AB', 'AC', 'XYZ' ],
  };

• environment.dev.ts

  export const environment = {
       production: false,
       apiHost: 'https://api.somedomain.com/dev/v1/',
       CONSUMER_KEY : 'someReallyStupidTextWhichWeHumansCantRead', 
       codes: [ 'AB', 'AC', 'XYZ' ],
  };

Caso de uso no aplicativo

Você pode importar ambientes para qualquer arquivo, como serviços clientUtilServices.ts

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

getHostURL(): string {
    return environment.apiHost;
  }

Caso de uso na construção

Abra seu arquivo cli angular .angular-cli.jsone, dentro, "apps": [{...}]adicione o seguinte código

 "apps":[{
        "environments": {
            "dev": "environments/environment.ts",
            "prod": "environments/environment.prod.ts",
            "qa": "environments/environment.qa.ts",
           }
         }
       ]

Se você deseja criar para produção, executá- ng build --env=prodlo lerá a configuração environment.prod.ts, da mesma maneira que você pode fazê-lo para qaoudev

## Resposta mais antiga

Eu tenho feito algo como abaixo, no meu provedor:

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

@Injectable()
export class ConstantService {

API_ENDPOINT :String;
CONSUMER_KEY : String;

constructor() {
    this.API_ENDPOINT = 'https://api.somedomain.com/v1/';
    this.CONSUMER_KEY = 'someReallyStupidTextWhichWeHumansCantRead'
  }
}

Então eu tenho acesso a todos os dados constantes em qualquer lugar

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';

import {ConstantService} from  './constant-service'; //This is my Constant Service


@Injectable()
export class ImagesService {
    constructor(public http: Http, public ConstantService: ConstantService) {
    console.log('Hello ImagesService Provider');

    }

callSomeService() {

    console.log("API_ENDPOINT: ",this.ConstantService.API_ENDPOINT);
    console.log("CONSUMER_KEY: ",this.ConstantService.CONSUMER_KEY);
    var url = this.ConstantService.API_ENDPOINT;
    return this.http.get(url)
  }
 }

Embora a abordagem de ter uma classe AppSettings com uma constante de seqüência de caracteres como o ApiEndpoint funcione, não é ideal, pois não poderíamos trocar esse ApiEndpoint real por outros valores no momento do teste de unidade.

Precisamos ser capazes de injetar esses pontos de extremidade da API em nossos serviços (pense em injetar um serviço em outro serviço). Também não precisamos criar uma classe inteira para isso, tudo o que queremos fazer é injetar uma string em nossos serviços, sendo nosso ApiEndpoint. Para concluir a excelente resposta de pixelbits , aqui está o código completo de como isso pode ser feito no Angular 2:

Primeiro, precisamos dizer à Angular como fornecer uma instância do nosso ApiEndpoint quando a solicitarmos em nosso aplicativo (pense nisso como registrando uma dependência):

bootstrap(AppComponent, [
        HTTP_PROVIDERS,
        provide('ApiEndpoint', {useValue: 'http://127.0.0.1:6666/api/'})
]);         

E então, no serviço, injetamos esse ApiEndpoint no construtor de serviços e a Angular o fornecerá com base em nosso registro acima:

import {Http} from 'angular2/http';
import {Message} from '../models/message';
import {Injectable, Inject} from 'angular2/core';  // * We import Inject here
import {Observable} from 'rxjs/Observable';
import {AppSettings} from '../appSettings';
import 'rxjs/add/operator/map';

@Injectable()
export class MessageService {

    constructor(private http: Http, 
                @Inject('ApiEndpoint') private apiEndpoint: string) { }

    getMessages(): Observable<Message[]> {
        return this.http.get(`${this.apiEndpoint}/messages`)
            .map(response => response.json())
            .map((messages: Object[]) => {
                return messages.map(message => this.parseData(message));
            });
    } 
    // the rest of the code...
}

Esta é minha experiência recente com este cenário:

• @ angular / cli: 1.0.0
• nó: 6.10.2
• @ angular / núcleo: 4.0.0

Segui os documentos oficiais e atualizados aqui:

https://angular.io/docs/ts/latest/guide/dependency-injection.html#!#dependency-injection-tokens

Parece que o OpaqueToken agora está obsoleto e devemos usar o InjectionToken ; portanto, esses são meus arquivos executados como um encanto:

app-config.interface.ts

export interface IAppConfig {

  STORE_KEY: string;

}

app-config.constants.ts

import { InjectionToken } from "@angular/core";
import { IAppConfig } from "./app-config.interface";

export const APP_DI_CONFIG: IAppConfig = {

  STORE_KEY: 'l@_list@'

};

export let APP_CONFIG = new InjectionToken< IAppConfig >( 'app.config' );

app.module.ts

import { APP_CONFIG, APP_DI_CONFIG } from "./app-config/app-config.constants";

@NgModule( {
  declarations: [ ... ],
  imports: [ ... ],
  providers: [
    ...,
    {
      provide: APP_CONFIG,
      useValue: APP_DI_CONFIG
    }
  ],
  bootstrap: [ ... ]
} )
export class AppModule {}

my-service.service.ts

  constructor( ...,
               @Inject( APP_CONFIG ) private config: IAppConfig) {

    console.log("This is the App's Key: ", this.config.STORE_KEY);
    //> This is the App's Key:  l@_list@

  }

O resultado é limpo e não há avisos no console, graças ao recente comentário de John Papa nesta edição:

https://github.com/angular/angular-cli/issues/2034

A chave foi implementada em um arquivo diferente da interface.

Todas as soluções parecem ser complicadas. Estou procurando a solução mais simples para este caso e só quero usar constantes. As constantes são simples. Existe algo que fale contra a seguinte solução?

app.const.ts

'use strict';

export const dist = '../path/to/dist/';

app.service.ts

import * as AppConst from '../app.const'; 

@Injectable()
export class AppService {

    constructor (
    ) {
        console.log('dist path', AppConst.dist );
    }

}

Basta usar uma constante Typescript

export var API_ENDPOINT = 'http://127.0.0.1:6666/api/';

Você pode usá-lo no injetor de dependência usando

bootstrap(AppComponent, [provide(API_ENDPOINT, {useValue: 'http://127.0.0.1:6666/api/'}), ...]);

Se você estiver usando o Webpack , que eu recomendo, você pode configurar constantes para diferentes ambientes. Isso é especialmente valioso quando você tem diferentes valores constantes em uma base por ambiente.

Você provavelmente terá vários arquivos webpack em seu /configdiretório (por exemplo, webpack.dev.js, webpack.prod.js, etc.). Então você terá um, custom-typings.d.tsvocê os adicionará lá. Aqui está o padrão geral a seguir em cada arquivo e um exemplo de uso em um Componente.

webpack. {env} .js

const API_URL = process.env.API_URL = 'http://localhost:3000/';
const JWT_TOKEN_NAME = "id_token";
...
    plugins: [
      // NOTE: when adding more properties, make sure you include them in custom-typings.d.ts
      new DefinePlugin({
        'API_URL': JSON.stringify(API_URL),
        'JWT_TOKEN_NAME': JSON.stringify(JWT_TOKEN_NAME)
      }),

custom-typings.d.ts

declare var API_URL: string;
declare var JWT_TOKEN_NAME: string;
interface GlobalEnvironment {
  API_URL: string;
  JWT_TOKEN_NAME: string;
}

Componente

export class HomeComponent implements OnInit {
  api_url:string = API_URL;
  authToken: string = "Bearer " + localStorage.getItem(JWT_TOKEN_NAME)});
}

O uso de um arquivo de propriedades gerado durante uma construção é simples e fácil. Essa é a abordagem que a CLI Angular usa. Defina um arquivo de propriedades para cada ambiente e use um comando durante a compilação para determinar qual arquivo será copiado para seu aplicativo. Em seguida, basta importar o arquivo de propriedades a ser usado.

https://github.com/angular/angular-cli#build-targets-and-environment-files

Uma abordagem para o Angular4 seria definir uma constante no nível do módulo:

const api_endpoint = 'http://127.0.0.1:6666/api/';

@NgModule({
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    MessageService,
    {provide: 'API_ENDPOINT', useValue: api_endpoint}
  ]
})
export class AppModule {
}

Então, em seu serviço:

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

@Injectable()
export class MessageService {

    constructor(private http: Http, 
      @Inject('API_ENDPOINT') private api_endpoint: string) { }

    getMessages(): Observable<Message[]> {
        return this.http.get(this.api_endpoint+'/messages')
            .map(response => response.json())
            .map((messages: Object[]) => {
                return messages.map(message => this.parseData(message));
            });
    }

    private parseData(data): Message {
        return new Message(data);
    }
}

Eu tenho outra maneira de definir constantes globais. Porque se definimos no arquivo ts, se construímos no modo de produção, não é fácil encontrar constantes para alterar o valor.

export class SettingService  {

  constructor(private http: HttpClient) {

  }

  public getJSON(file): Observable<any> {
      return this.http.get("./assets/configs/" + file + ".json");
  }
  public getSetting(){
      // use setting here
  }
}

Na pasta do aplicativo, adiciono a pasta configs / setting.json

Conteúdo em setting.json

{
    "baseUrl": "http://localhost:52555"
}

No módulo de aplicativo, adicione APP_INITIALIZER

   {
      provide: APP_INITIALIZER,
      useFactory: (setting: SettingService) => function() {return setting.getSetting()},
      deps: [SettingService],
      multi: true
    }

Dessa forma, eu posso alterar o valor no arquivo json mais facilmente. Eu também uso esse caminho para mensagens constantes de erro / aviso.

O AngularJS module.constantnão define uma constante no sentido padrão.

Embora ele próprio seja um mecanismo de registro de provedor, ele é melhor compreendido no contexto da função related module.value( $provide.value). A documentação oficial indica claramente o caso de uso:

Registre um serviço de valor com o injetor $, como uma string, um número, uma matriz, um objeto ou uma função. É a abreviação de registrar um serviço em que a propriedade $ get do provedor é uma função de fábrica que não aceita argumentos e retorna o serviço de valor. Isso também significa que não é possível injetar outros serviços em um serviço de valor.

Compare isso com a documentação de module.constant( $provide.constant), que também indica claramente o caso de uso (ênfase meu):

Registre um serviço constante com o injetor $, como uma string, um número, uma matriz, um objeto ou uma função. Como o valor, não é possível injetar outros serviços em uma constante. Porém, diferentemente do valor, uma constante pode ser injetada em uma função de configuração do módulo (consulte angular.Module) e não pode ser substituída por um decorador do AngularJS .

Portanto, a constantfunção AngularJS não fornece uma constante no significado comumente entendido do termo no campo.

Dito isto, as restrições impostas ao objeto fornecido, juntamente com sua disponibilidade anterior via injetor $, sugerem claramente que o nome é usado por analogia.

Se você quisesse uma constante real em um aplicativo AngularJS, "forneceria" uma da mesma maneira que faria em qualquer programa JavaScript que seja

export const π = 3.14159265;

No Angular 2, a mesma técnica é aplicável.

Os aplicativos Angular 2 não possuem uma fase de configuração no mesmo sentido que os aplicativos AngularJS. Além disso, não há mecanismo de decorador de serviço ( AngularJS Decorator ), mas isso não é particularmente surpreendente, considerando a diferença entre eles.

O exemplo de

angular
  .module('mainApp.config', [])
  .constant('API_ENDPOINT', 'http://127.0.0.1:6666/api/');

é vagamente arbitrário e um pouco desanimador, porque $provide.constantestá sendo usado para especificar um objeto que, aliás, também é uma constante. Você também pode ter escrito

export const apiEndpoint = 'http://127.0.0.1:6666/api/';

pois todos podem mudar.

Agora, o argumento da testabilidade, zombando da constante, diminui porque literalmente não muda.

Não se zomba de π.

É claro que a semântica específica de seu aplicativo pode ser que seu terminal possa mudar ou sua API possa ter um mecanismo de failover não transparente, portanto, seria razoável que o terminal da API fosse alterado sob determinadas circunstâncias.

Mas, nesse caso, fornecê-lo como uma representação literal de cadeia de caracteres de um único URL para a constantfunção não teria funcionado.

Um argumento melhor e provavelmente mais um alinhado com a razão da existência da $provide.constantfunção AngularJS é que, quando o AngularJS foi introduzido, o JavaScript não tinha um conceito de módulo padrão . Nesse caso, os globais seriam usados ​​para compartilhar valores, mutáveis ​​ou imutáveis, e o uso de globais é problemático.

Dito isto, fornecer algo assim através de uma estrutura aumenta o acoplamento a essa estrutura. Também combina lógica específica angular com lógica que funcionaria em qualquer outro sistema.

Isso não quer dizer que seja uma abordagem errada ou prejudicial, mas pessoalmente, se eu quiser uma constante em um aplicativo Angular 2, escreverei

export const π = 3.14159265;

exatamente como eu teria usado o AngularJS.

Quanto mais as coisas mudam ...

A melhor maneira de criar constantes amplas para aplicativos no Angular 2 é usando os arquivos environment.ts. A vantagem de declarar essas constantes é que você pode variar de acordo com o ambiente, pois pode haver um arquivo de ambiente diferente para cada ambiente.

Você pode criar uma classe para sua variável global e exportar essa classe da seguinte maneira:

export class CONSTANT {
    public static message2 = [
        { "NAME_REQUIRED": "Name is required" }
    ]

    public static message = {
        "NAME_REQUIRED": "Name is required",
    }
}

Depois de criar e exportar sua CONSTANTclasse, você deve importar essa classe na classe em que deseja usar, assim:

import { Component, OnInit                       } from '@angular/core';
import { CONSTANT                                } from '../../constants/dash-constant';


@Component({
  selector   : 'team-component',
  templateUrl: `../app/modules/dashboard/dashComponents/teamComponents/team.component.html`,
})

export class TeamComponent implements OnInit {
  constructor() {
    console.log(CONSTANT.message2[0].NAME_REQUIRED);
    console.log(CONSTANT.message.NAME_REQUIRED);
  }

  ngOnInit() {
    console.log("oninit");
    console.log(CONSTANT.message2[0].NAME_REQUIRED);
    console.log(CONSTANT.message.NAME_REQUIRED);
  }
}

Você pode usar isso em constructorou ngOnInit(){}ou em qualquer método predefinido.