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?

Answer 1

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.

Answer 2

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.