Trying to pass gulp environment-dependent web-pack variables into angularjs app

Question

I'm fairly new to AngularJS and gulp and webpack so excuse me if I'm not using correct terminologies. Been reading stack overflow and angularjs stuff for 2 hours and can't make the connections with what I'm reading.

I'm coming into an already developed application and trying to find the best way to include analytics API keys from a webpack plugin variables into the AngularJS app to use.

The directory is setup as such:

ng_organize
    /gulp
        /tasks
            webpack-development.js
            webpack-production.js
        /util
    /src
        /appName
            /customer
                CustomerController.js
                ...
            /home
            /shop
        app.js
        index.js
    application.js

The webpack variables in ng_organize/gulp/tasks/webpack-development.js are:

gulp.task('webpack:development', function(callback){
    webpack({
        context: ...
        plugins: [
            new webpack.DefinePlugin {
                GOOGLE_ANALYTICS_KEY: 'XXX',
                ...
            }    
        ]
    });
});

Currently, the webpack variables can be accessed in ng_organize/application.js with GOOGLE_ANALYTICS_KEY . I'm trying to access them within ng_organize/src/appName/customer/CustomerController.js .

I want to create a service to store GOOGLE_ANALYTICS_KEY (and other keys) that is dependent on the environment. Is this possible? If so, how would I go about doing it?

Answer 1

It turns out they are automatically included globally in your app's code, you just won't be able to call the global variables in the debugger (which was how I was testing to see if they were accessible inside the CustomerController).

GOOGLE_ANALYTICS_KEY is still accessible inside CustomerController.