title: Merge different config files in environment files
body: <p>I'm trying to have separate config files which I import/merge in the environment files to provide a further global CONFIG object with all the right properties that are meant for the current environment.</p>
  
  <p><strong><code>config/production.ts:</code></strong></p>
  
  <pre><code>export const APP_CONFIG = {
    api: {
      root: 'https://api.example.com'
    },
    cookie: {
      domain: '.example.com'
    },
    serviceWorker: {
      enabled: true
    }
    // ... many more more properties
  };
  </code></pre>
  
  <p><strong><code>config/local.ts</code>:</strong></p>
  
  <pre><code>export const APP_CONFIG = {
    // ... only properties that are different from production
    api: {
      root: 'http://api.example.local'
    },
    cookie: {
      domain: '.example.local'
    },
    serviceWorker: {
      enabled: false
    }
  };
  </code></pre>
  
  <p><strong><code>config/dev.ts</code>:</strong></p>
  
  <pre><code>export const APP_CONFIG = {
    // ... only properties that are different from production
    api: {
      root: 'http://localhost:8001'
    },
    cookie: {
      domain: 'localhost'
    }
  };
  </code></pre>
  
  <p>And one more config file for a test environment.</p>
  
  <p>Then,
  <strong><code>environment.prod.ts</code>:</strong></p>
  
  <pre><code>import { APP_CONFIG } from '../config/production';
  
  export const environment = {
    production: true,
    CONFIG: APP_CONFIG
  };
  </code></pre>
  
  <p><strong><code>environment.ts</code>:</strong></p>
  
  <pre><code>import { APP_CONFIG as CONF_PROD } from '../config/production';
  import { APP_CONFIG as CONF_DEV } from '../config/dev';
  
  export const environment = {
    production: true,
    CONFIG: { ...CONF_PROD, ...CONF_DEV }
  };
  </code></pre>
  
  <p><strong><code>environment.local.ts</code>:</strong></p>
  
  <pre><code>import { APP_CONFIG as CONF_PROD } from '../config/production';
  import { APP_CONFIG as CONF_LOCAL } from '../config/local';
  
  export const environment = {
    production: true,
    CONFIG: { ...CONF_PROD, ...CONF_LOCAL }
  };
  </code></pre>
  
  <p>Next, in my <strong><code>app.module.ts</code>:</strong></p>
  
  <pre><code>ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production &amp;&amp; environment.CONFIG.serviceWorker.enabled })
  </code></pre>
  
  <p>So that the service worker is enabled only if both conditions are met: a) it is a production build (<code>environment.production: true</code>, not to be mistaken with the environment I build for) and b) I actually want the service worker enabled in that environment (<code>CONFIG.serviceWorker.enabled</code>).</p>
  
  <p>Of course, in my <code>.angular-cli.json</code> I have them declared:</p>
  
  <pre><code>"environments": {
    "dev": "environments/environment.ts",
    "local": "environments/environment.local.ts",
    "test": "environments/environment.test.ts",
    "prod": "environments/environment.prod.ts"
  }
  </code></pre>
  
  <p>If I <code>ng build --prod --env=local</code> I still get the ServiceWorker enabled in my app, although I set it to false in <code>config/local.ts</code>, which overrides the "serviceWorker" object in <code>config/production.ts</code>.</p>
  
  <p>In fact, even if I set <code>serviceWorker: { enabled: false }</code> in ALL configs, no matter what environment I set with the <code>--env</code> flag when building, I always get the ServiceWorker enabled.</p>
  
  <p>Also, if I check other <code>environment.CONFIG</code> properties at runtime (like <code>environment.CONFIG.apiEndpoint</code> or <code>environment.CONFIG.cookieDomain</code>), they are the ones that I would expect, based on the environment I specified with the <code>--env</code> flag when building.
  I don't know what am I missing here? If the CLI picks the right environment file on build time, based on the <code>--env</code> flag, why isn't the properly merged <code>environment.CONFIG</code> object also present at build time?
  If I move the serviceWorker config property directly in my environment files, it works. But the point is to have it with the rest of the config properties, in my config files which get merged in the environment files.</p>
  
  <p>The point of this setup is that there might be a lot of config properties for the app, but only a few might differ from environment to environment. I don't want to write all of them in each environment file.</p>
  
  <p>So, it makes sense to have the production config with all the properties, and then in a config for each of the other environments (dev/local, test) only have the properties that are different from production, so they can be merged, thus the current environment properties would be composed by the production config with some config properties overwritten by the config of the current environment.</p>