Pfthb

I'm new to Angular2 and have some questions.

I have a service which requests some JSON data from a Web API:

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

@Injectable()
export class ReviewService 
 private actionUrl: string;

 constructor(private _http: Http) 
 this.actionUrl = 'http://api.dc-shop.com/review';
 

 public GetAll = (): any => 
 return this._http.get(this.actionUrl)
 .map(x => x.json());
 

I would like to avoid hard coding the API address in the constructor and instead read a setting from appSettings.json which I can use for the action URL at startup for production and localhost servers.

What is the best way of doing this in ASP.NET MVC Core?

Two options I can think of:

1) Put the configuration in environment.ts as well as appSettings.json - access to this is built into angular.

2) Step 1 of your service loads appSettings.json using a straight-forward http.get and then uses the config from it load the required data.

Example of environment.ts

export const environment = 
 apiUrl: 'http://api.dc-shop.com',
 mode: 'prod'
;

Example usage:

import environment from './environment'; 
constructor(private _http: Http) 
 this.actionUrl = environment.apiUrl + '/review';

You can implement this by using Angular Http Intercepter

Add the http://api.dc-shop.com prefix in each request.

Example Code:

Write an Request Intercepter in Your Angular App:

@Injectable()
export class RequestInterceptor implements HttpInterceptor 

 intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> 
 let req_url = req.url
 req.clone(url:`http://api.dc-shop.com/$req_url`)
 return next.handle(req);
 

And in your Main Module:

 export const httpInterceptorProviders = [
 provide: HTTP_INTERCEPTORS, useClass: RequestInterceptor, multi: true,
 } 

 @NgModule(
 providers: [...,httpInterceptorProviders]
 )

If you want to config your prefix url in different environment:

Your can define it in your environment.xx.ts under /src/environments

And Define the build config in angular.json

 ....
 "configurations": 
 "api": 
 ....
 "fileReplacements": [
 
 "replace": "src/environments/environment.ts",
 "with": "src/environments/environment.api.ts"
 
 ]
 
 ....
 
 ...

And when your build your app ,

just add configuration

 ng build --configuration=api

Good Luck!