Charger Config Fichier JSON Dans Angulaire 2

MISES à jour

Inspiré de la solution pour ce problème particulier créé ngx-envconfig paquet et l'a publié sur NPM base de registre. Il a les mêmes fonctionnalités qu'il est prévu dans cette réponse, et même plus.

---

Vous pouvez avoir le fichier JSON quelque part dans le dossier des actifs comme: assets/config. Selon que l'environnement est dev ou pas, vous pouvez utiliser deux .json fichiers, l'un pour le développement et l'autre pour la production. Vous pouvez donc avoir development.json et production.json fichiers, où chacun va garder l'API appropriée des points de terminaison.

Fondamentalement, vous avez besoin de passer par les étapes suivantes:

1. Paramétrage de l'environnement (ignorez cette étape si vous l'avez déjà)

Créer deux fichiers dans src/environments dossier:

de l'environnement.prod.ts

export const environment = {
  production: true
};

de l'environnement.ts

export const environment = {
  production: false
};

2. Créer des fichiers de configuration JSON

actifs/config/production.json

{
  "debugging": false,

  "API_ENDPOINTS": {
    "USER": "api/v1/user",
    ...
  }
}

actifs/config/développement.json

{
  "debugging": true,

  "API_ENDPOINTS": {
    "USER": "api/v1/user",
    ...
  }
}

3. Créer un service comme suit

Note en fonction de l'environnement, la ConfigService va charger le fichier approprié

import { Injectable, APP_INITIALIZER } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs';
import { environment } from 'environments/environment'; //path to your environment files
@Injectable()
export class ConfigService {
private _config: Object
private _env: string;
constructor(private _http: Http) { }
load() {
return new Promise((resolve, reject) => {
this._env = 'development';
if (environment.production)
this._env = 'production';
console.log(this._env)
this._http.get('./assets/config/' + this._env + '.json')
.map(res => res.json())
.subscribe((data) => {
this._config = data;
resolve(true);
},
(error: any) => {
console.error(error);
return Observable.throw(error.json().error || 'Server error');
});
});
}
//Is app in the development mode?
isDevmode() {
return this._env === 'development';
}
//Gets API route based on the provided key
getApi(key: string): string {
return this._config["API_ENDPOINTS"][key];
}
//Gets a value of specified property in the configuration file
get(key: any) {
return this._config[key];
}
}
export function ConfigFactory(config: ConfigService) {
return () => config.load();
}
export function init() {
return {
provide: APP_INITIALIZER,
useFactory: ConfigFactory,
deps: [ConfigService],
multi: true
}
}
const ConfigModule = {
init: init
}
export { ConfigModule };

4. Intégrer avec app.le module.ts

import { NgModule } from '@angular/core';
import { ConfigModule, ConfigService } from './config/config.service';
@NgModule({
imports: [
...
],
providers: [
...
ConfigService,
ConfigModule.init(),
...
]
})
export class AppModule { }

Maintenant, vous pouvez utiliser ConfigService où vous voulez obtenir les API des points de terminaison définis dans la configuration .json fichiers.

OriginalL'auteur Karlen

J'ai eu le même problème et j'ai finalement abandonner .ts et le mettre dans .js 😀 comme ceci:

configuration.js dans la racine

var configuration = {
'apiHost': 'http://localhost:8900',
'enableInMemoryWebApi': false,
'authMode': 'standalone',
'wsUrl': 'ws://localhost:8900/ws'
};
module.exports = configuration;

.fichier ts pour ex. de l'utilisateur.service.ts

let configuration = require('../configuration'); //in import section
@Injectable()
export class UserService {
...
getUser(id: number | string): Promise<User> {
console.log(configuration.apiHost) //will get propertye from .js file
return this.http.get(`${configuration.apiHost}/${id}`, this.headers).toPromise().then(this.extractData).catch(this.handleError);
}
}

Espère que cela aide

OriginalL'auteur dev_in_progress

Oui je l'ai fait @karlen

Mon application.le module.ts a la suite dans le schéma semblable à celui ci-dessus.

AppConfiguration,
{provide:APP_INITIALIZER,useFactory:initConfig, deps:[AppConfiguration],multi:true}

Ayant toujours problème de même que d'autres services d'essayer d'injecter de la valeur avant de la AppConfiguration est chargé à partir du fichier

OriginalL'auteur Ayush