How do you access environment variables on the front end when using Yeoman's angular-fullstack generator?

Question

I'm using Yeoman's angular-fullstack generator.

I want to access some environment variables in a front end controller (main.controller.js). The only way I know how to set environment variables is the following:

server/config/environment/local.env.js

'use strict';

// Use local.env.js for environment variables that grunt will set when the server starts locally.
// Use for your api keys, secrets, etc. This file should not be tracked by git.
//
// You will need to set these on the server you deploy to.

module.exports = {
  DOMAIN: 'hidden',
  SESSION_SECRET: "hidden",
  // Control debug level for modules using visionmedia/debug
  DEBUG: 'hidden',
  CALENDAR_ID: 'hidden',
  API_KEY: 'hidden'
};

However, from what I understand, this only makes it accessible on the server, but I want it on the front end. The following don't work in my front end controller: ENV.API_KEY and process.env.API_KEY.

What should I do?

Answer 1

This is server side files, so, you need make client(browser) can access this file,you need confirm this file is in public path that client can access directly, just like general web.. you can use tag to load this source file, and other files can rely on it.