Angular2 Read from Configuration File

Question

I'm making a new angular2 application which will hit an endpoint on all of our applications on all of our servers to get build numbers, and then it will display them in a grid so we can see which servers have which build numbers.

When I built a similar application using Angular1, I was able to use gulp-ng-config to read a JSON file and output an angular module with the values from the JSON. I'm looking to do something similar in Angular2, but I have no idea how to accomplish this. Any ideas?

score 5 · Accepted Answer · answered Mar 14 '16 at 16:08

5

This way you go read .json file in Angular2.
Note: This way you can read .json file. This demo shows .json file example.

working demo => click friends tab

http.get('friends.json (=filepath)')
    .map(res => res.json())
    .subscribe((data) => {  this.result=data; },
                            err=>console.log(err),
                            ()=>console.log('done')
               );

answered Mar 14 '16 at 16:08

micronyks

54,797
15
112
146

Thanks as always micronyks! – Alex Kibler Mar 14 '16 at 16:39

score 4 · Answer 2 · answered Oct 26 '16 at 20:21

The best way to read configuration file in Angular2 release version 2.1.0.0 is like, your service would be something like below

    @Injectable()
        export class ConfigService {
          private Server:string = "";
          private AppKey = "";
          constructor(private _http:Http) {
          }
          public load() {
            return new Promise((resolve, reject) => {
              this._http.get('config.json')  // path of your config.json file
                .map(res => res.json())
                .subscribe(
                  (data:any) => {
                    this.Server = data.server;
                    this.AppKey = data.appkey;
                    resolve(true);
                  },
                  err=>console.log(err)
                );
            });
          }

      public getServer(){
           return  this.Server;
        }

    public getAppKey(){
           return  this.AppKey;
        }
  }

you have to load this configuration app.module.ts like

@NgModule({
  declarations: [
  ..
  ],
  imports: [
    ...
    ],
  providers: [ConfigService,
      {
      provide: APP_INITIALIZER,
      useFactory: (config:ConfigService) => () => config.load(),
      deps: [ConfigService],
      multi: true
    }


  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Is it ok to use a json file to store sensible configuration data like secretkey and clientId? Isn't config.json a public file? — Juan Rojas, Oct 11 '19 at 22:22
@JuanRojas i would say no. in my case it only store back server info like host and port — Md Ayub Ali Sarker, Oct 15 '19 at 17:00

score -2 · Answer 3 · answered Mar 14 '16 at 15:36

-2

Normal $http get call to the configuration file should suffice your requirement.

$http.get('path-to-configuration-file')
   .success(function (confData) {
     // Use your conf data however you like
   })
   .error(function () {
      // File not found
   });

I hope this works

answered Mar 14 '16 at 15:36

ganeshwani

19
4

While that actually makes sense, don't you just mean `Http`? I didn't think $http was in angular2 – Alex Kibler Mar 14 '16 at 15:37
@AlexKibler: thanks for the correction. Http is what I meant. Not much familiar with angular2, but as an idea http should work for this problem – ganeshwani Mar 14 '16 at 15:43

Angular2 Read from Configuration File

3 Answers3