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

Answer 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.

Answer 2

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.