0

I'd like to ask for an advice. I'm developing an angular app and using angular cli. The app is going to be deployed on one of the IIS servers. The angular production files will be within web.config (.NET) file in the same folder. I would like to be able to read some variables (e.g. OAuth params or proxy config url) from that web.config file in the Angular production build. Any idea how it can be implemented? Thanks

Improve this question

2 Answers 2

Reset to default
1

If you need more control of how the Angular app is set up, packed and bundled, you can try to eject it.

This will produce a webpack config file with a default configuration for the ng project. After that, you can modify variables and parameters before build and not only.

Beware, this disables the use of ng commands from the cli.

(Can be reactivated if you change eject: true to eject: false inside the angular-cli.json. However, ng commands will always ignore the webpack config file)

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Unfortunately, the web.config is for server-side applications only, so without additional server-side code (such as hosting inside a dotnet application, and exposing the settings via Web API) it won't really be possible.

Out-of-the-box, the @angular/cli makes use of compile time property settings, which can be frustrating and problematic (you would need to bundle your keys into the deployable code, and rebuild the package if the settings needed to change between environments).

The most common way around this is to create a environment specific config.json file, and then overwrite that at deployment time. So, for example, you would have:

  • dev.config.json
  • test.config.json
  • prod.config.json

And then at deployment time you would just rename the right file over config.json and link to it in your index.html.

I know this likely means duplicating settings into a different file, but it's the most expedient way of solving the problem - and does give you a certain degree of flexibility to change at run-time (just be careful of the file being cached).

Improve this answer

5 Comments

Thanks for your answer! In the moment I'm considering to create .Net Core "empty" app and add Angular 2 into it. The app will be served from an IIS server. Can I ask you how I can implement the thing you mentioned "the web.config is for server-side applications only, so without additional server-side code (such as hosting inside a dotnet application, and exposing the settings via Web API) it won't really be possible." I'm quite new in .Net environment.
Sure, so all you would do is add a Web API method that reads the value out of your web.config and returns it to the angular app. The angular app will have to make the http call to that method on startup.
Thank you very much. I have to ask our .Net guy to look at it. I'm also playing with the second approach that you mentioned. I have WebAPI which won't be on the same domain as my Angular app. In my development I use angular-cli proxy
That's how we do it. :) (But it does add deployment complexity). If you're happy that this has helped, would you mark it as an answer? Good luck!
Sorry, that I'm asking again. I don't really know how I can read from config.prod.json file for my purpose - external WebAPI url in the Angular app in production build. I'm getting that config.json file will be presented in angular index.html, but how I can implement the reading of url path from config.json file and add it to the Angular http services when the angular app is already built. Can you point me to some tutorial? Many thanks.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.