title: VSTS build - replace Angular4 environment variables in Release stage
body: <p>Currently I have three different environments in Angular4:    </p>
  
  <ul>
  <li>Environment</li>
  <li>Environment.Debug</li>
  <li>Environment.Release</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/aH7XZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/aH7XZ.png" alt="enter image description here"></a></p>
  
  <p>Now, in vsts build pipeline I have set up multi-configuration where one definition prepares artifacts for debug and release:<br>
  <a href="https://i.imgur.com/sa29c36.png" rel="noreferrer"><img src="https://i.imgur.com/sa29c36.png" alt="enter image description here"></a></p>
  
  <p>I am using "<a href="https://marketplace.visualstudio.com/items?itemName=qetza.replacetokens" rel="noreferrer">Replace tokens</a>" task to replace variables per debug and release environment, before I run <strong>npm install</strong> and <strong>npm run {either debug or release)</strong> which then runs webpack to pack files for debug or release environment.</p>
  
  <p>I saw there is an option to replace variables in Release where you can replace variables in your .json file(like appsettings.json):
  <a href="https://i.stack.imgur.com/e8cjZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/e8cjZ.png" alt="enter image description here"></a></p>
  
  <p>But problem is when webpack packs source code into one bundle.js I think I cannot use release to replace environment variables? Can I?</p>
  
  <p>So what I want to achieve is decouple debug and release builds. This is simple I just recreate separate definitions for debug and release, where I am only replacing variables per environment. Second stage is to actually remove Replace tokens task from build pipeline and use Release variables section to replace variables per environment set up in Release. How is that possible for Angular after webpack builds bundle in js?</p>