Angular2 configuration data with conversion

Question

I am creating an Angular2 application that will use webApi. What is the best practice for handling configuration data? I would like to do the conversion when deploying to different environments.

When running locally, webApi will be local, for example: http: // localhost: 64551 / Api / person .

In Dev, it will be: http://devServer.com/Api/person

Prod will be: http://prodServer.com/Api/person

I cannot hardcode the server name. I need this in the configuration, but it will change when deployed in different environments.

This is an Anglar2 project that I create inside an ASP.net 5 project using Visual Studio. WebApi is an ASP.net 5 project. I will be participating in Azure.

In the past, I used web.config conversions, but this is not an option for an angular application.

Any tips?

Answer 1

• Add multiple solution configurations from visual studio - debug, qa, prod

• Inside the folder, app/add environment-specific configuration files

  • environment.debug.ts
  • environment.qa.ts
  • environment.prod.ts

• app/Add a file inside the folder environment.ts. Add your configuration data there. Import this file into different components for use.

• To include an environment-specific configuration file, add a script to the project prebuild project from the properties of the visual studio project

xcopy "app\config\environment.$(ConfigurationName).ts" "app\environment.ts" /Y