web-dev-qa-db-fra.com

Charger le fichier JSON de configuration dans Angular 2

Je souhaite charger Constant File dans Angular 2 (qui est un fichier TypeScript normal) comportant des points d'extrémité WebAPI. Dans Angular1.x. nous avions l'habitude d'avoir des constantes pour le même. Comment dans Angular 2 je peux implémenter le même?

J'ai créé le fichier .ts. Ma principale préoccupation est de savoir comment charger le fichier au préalable à chaque chargement de fichier Other class. 

fichier .ts:

export class testAPI {
     getAPI = "myUrl";
}

Dans le fichier de service, j'utilise la même chose en faisant l'importation normale:

constructor(private http: Http) { 

      //console.log(this.test);
      console.log(this.testing.getAPI);
      //this.test.load();
    }

J'obtiens la console en tant qu'indéfinie (ce doit être parce que ma classe de service est en cours de chargement avant la classe d'API).

Merci d'avance.

jsonangulartypescript
5
Avinash

MISES À JOUR

Inspiré par la solution à ce problème particulier, créé ngx-envconfig package et publié sur le registre NPM. Il a les mêmes fonctionnalités que celles fournies dans cette réponse et même plus. 

Vous pouvez avoir le fichier JSON quelque part dans le dossier des ressources, par exemple: assets/config. Selon que l’environnement est dev ou non, vous pouvez utiliser deux fichiers .json, un pour le développement et un pour la production. Ainsi, vous pouvez avoir les fichiers development.json et production.json, où chacun conservera les points de terminaison d'API appropriés. 

Fondamentalement, vous devez suivre les étapes suivantes:

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

Créez deux fichiers dans le dossier src/environments:

environment.prod.ts

export const environment = {
  production: true
};

environment.ts

export const environment = {
  production: false
};

2. Créer des fichiers de configuration JSON

assets/config/production.json

{
  "debugging": false,

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

assets/config/development.json

{
  "debugging": true,

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

3. Créez un service comme suit

Notez que, selon l'environnement, la ConfigService chargera 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.module.ts

import { NgModule } from '@angular/core';
import { ConfigModule, ConfigService } from './config/config.service';

@NgModule({
    imports: [
        ...
    ],
    providers: [
        ...
        ConfigService,
        ConfigModule.init(),
        ...
    ]
})

export class AppModule { }

Vous pouvez maintenant utiliser ConfigService où vous voulez obtenir les points de terminaison d'API nécessaires définis dans les fichiers config .json. 

9
Karlen

Il est possible d'importer du JSON dans TypeScript. Vous devez ajouter des saisies:

typings.d.ts:

declare module "*.json" {
  const value: any;
  export default value;
}

Et puis importez comme ceci:

import config from "../config/config.json";

config.json:

{
  "api_url": "http://localhost/dev"
}
5
Alex Po

J'ai eu le même problème et à la fin, j'ai abandonné .ts et je l'ai mis dans .js: D comme ceci:

configuration.js en racine

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

module.exports = configuration;

dans le fichier .ts pour ex. user.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);
    }
}

J'espère que ça aide

2
dev_in_progress

Vous pouvez utiliser Jeton Opague pour définir des valeurs constantes en tant que fournisseurs

Essayez: Dans votre fichier const:

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

export const CONFIG_TOKEN = new OpaqueToken('config');
export const CONFIG = {
  apiUrl: 'myUrl'
};

Dans votre AppModule, définissez-le comme fournisseur singleton pour l'application:

providers:[
//other providers,
{provide: CONFIG_TOKEN, useValue: CONFIG}
]

Pour l'injection en constructeur,

constructor( @Inject(CONFIG_TOKEN) private config)
0
Suraj Rao