how to configure my angular 4 typescript file environment?

Question

This is my first time trying to deploy an Angular4 application. I want to set the URL of an API endpoint, and I would like for it to be different in every environment. what type of changes are to be taken in my source? How to set my angular4 web api to access every environment? can i use virtual-PC? how reading web.config db connection in typescript file?

Answer 1

If i good understand your question, you can create file config.dev.json inside this file you will have

webApiSettings:{
    "url1": "http://localhost:xxxx/api/",
    "url2": "http://pathToOtherApi/api/"
}

After that you can create some file-service.ts to load configuration for example:

class NewClass {
    config.getConfig("webApiSettings").url1
}

You can set your environments locally, but it will be annoying. Put your api on some hosting like heroku for example and fire to this api on heroku from your config.dev.json.