angular 2 app on azure read app settings

Question

I want to deploy an angular 2 app to different web app slots (let's say dev, staging and prod) using VSTS CI/CD. Each slot should point to a different web api. Normally one would specify three different environment files inside the app, but the downside is that I would have to build three times with different environments.

What I want to achieve is to have only two builds, dev and prod. The dev get's deployed to the dev slot and the prod build get's deployed to staging first and then the same build should be deployed to the production slot. I can define app settings for each slot. They are treated like environment variables.

Is there a way to read those config settings from within an angular 2 app or am I missing something else?

score 2 · Answer 1 · answered Mar 06 '17 at 20:27

I'd discourage you from having the same build deployed two/three separate times as you'd miss out on code minification and bundling for your production server.

What you could do is set up build tasks in VSTS: so you could, for instance, run npm your-build-task --prod when your code is pushed to a production branch, and simply npm yourbuild-task when pushed to master or a development branch, etc.

In your AppModule (or whatever module you have your services in), you can set up the following:

providers: [
...
  {
    provide: API_CONFIG, useFactory: apiConfigFactory
  }
...
]

...

export function apiConfigFactory() {
  if (environment.production) {
    return MY_PROD_API_CONFIG;
  } else {
    return MY_DEV_API_CONFIG;
  }
}

And that way, you can set up your base URLs in each config object: one pointing to prod, one pointing to dev, and you can simply inject API_CONFIG to get the correct base API URLs.

But, if you'd like to keep the same build, you can do something similar above, but in your apiFactoryConfig function, you'd need some logic to tell the environments apart: say like checking the browser's base azurewebsites.net URL or something like that.

Thank you for your suggestion. I think I can reduce the problem to the following: I have 2 builds for 3 environments and I need some mechanism to tell them apart. Azure has app settings for each deployment slot so my intention was to read them. If this is not possible I would fall back to 3 builds for 3 deployments. the URL method you mentioned would fail if I decided to deploy the app to another URL or sth like this. — user3838018, Mar 07 '17 at 15:41

score 1 · Answer 2 · edited May 23 '17 at 12:18

1

Only backend language can access APP Settings as environment variables at runtime. As Angular 2 is on the front side, we can't directly read these settings from front-end. A workaround to it is read app settings via backend which exposes an endpoint, then access this endpoint via AJAX call in your Angular 2 app.

You can check out my earlier post where I posted PHP sample code to read APP Settings.

edited May 23 '17 at 12:18

Community

1
1

answered Mar 16 '17 at 07:55

Aaron Chen

9,835
1
16
28

1

thank you for your suggestion but I somehow don't like to expose app settings to a "public" api. Everyone that knows the URL could read sensitive information (like connectionstrings) – user3838018 Mar 17 '17 at 10:55
For anyone thinking about this problem the Environment Tag Helper in the 'Determining the environment at runtime' section of this article may be useful: https://learn.microsoft.com/en-us/aspnet/core/fundamentals/environments – TonE Jun 08 '17 at 12:19

angular 2 app on azure read app settings

2 Answers2

Linked