Best approach to access Azure Web App Settings in Angular 2 and Above

user_2260976 0
Viewed 1770

Well the application is not a .Net/core application. Hence I am not able to leverage the use of System.Configuration. System.Configuration.ConfigurationManager.AppSettings["RedirectURL"]

Can anyone help me to understand, what is the best approach for any Angular2 and above applications to leverage the azure web apps, app settings, to be able to use in the application.

I was able to get it by calling an external API to return me these app settings, however that is a real overhead.

angular
2 Answers

Well after lot of research and went through lot of blogs, I finally able to implement this. First thing was I was not able to use process.env in typescript and access my environment variables

Step 1 - Create a custom-config.js at the same folder as in package.json

const webpack = require('webpack')

module.exports = {
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                apiURL: JSON.stringify(process.env.apiURL)
            }
        })
    ]
}

Step 2 - Create a typings.d.ts at the same folder as in custom-config.js, to expose the env interface to be available for typescript

declare var process: NodeJS.Process;

interface Process {
    env: Env
}

interface Env {
    apiURL: string;
}

interface GlobalEnvironment {
    process: Process;
}

Step 3 - Install npm Packages.

Need to install npm packages @angular-builders/custom-webpack , @angular-builders/dev-server, @angular-devkit/build-angular and dotenv

Step 4 - Update the default builder to custom builder in angular.json

"build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "extra-webpack.config.js"
            },

Step 5 - Make sure to update the build option of serve as well in angular.json

"serve": {
          "builder": "@angular-builders/dev-server:generic",

Finally I could use this in my Type Script process.env['apiURL'], once I have set my environment variable. Otherwise I get the value as undefined

*NOTE : I always had to restart my system (OS: Windows 10) in order for me to get the values available in my Application. I will still have to go dig more to find out this issue or a work around.

Update : Apparently I do not need to restart my system. just restarting the IDE will do.

user_22609760

AngularCLI have access to environment variable, but they are only accessible during build time. I think you can access the azure web app variable in your build pipeline, but that would require a rebuild every time you update the config.

Azure Web app is capable of hosting a .net/core application, and you can host your Angular application via dotnet/core. If you decide to do so, you can put the config as a global variable on your index.cshtml file. 

<script>
    window.config = {
        configName: '@System.Configuration.ConfigurationManager.AppSettings["configName"]',

    };
</script>

now you can access your config anywhere in your application.

user_55357810
Related