title: Angular 2 index.html - different for development and production
body: <p>I need to implement snipcart in my angular 2 project. 
  The script tag below needs to be inserted in head of my index.html file.</p>
  
  <p>However, the data-api-key differs for development and production environments.. how do I do that?</p>
  
  <pre><code>&lt;script src="https://cdn.snipcart.com/scripts/2.0/snipcart.js" 
          id="snipcart" 
          data-api-key="insert-your-key-here"&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>It is important that the script tag is available in the index.html file, snipcart.com will check that for security purposes.</p>
  
  <p>I have tried to do this at runtime:
  Add the script tag without the src-url in the index.html file and then in main.ts update the tag attributes with the correct api-key value and src-url. </p>
  
  <p>That way snipcart runs with the correct key, but validation from snipcart.com fails.</p>
  
  <p>So I need to set the api-key at compile time. My index.html needs to be different in development and production mode.</p>
  
  <p>My project is created with angular cli:</p>
  
  <pre><code>"angular-cli": "1.0.0-beta.19-3",
  
  "@angular/common": "~2.1.0",
  "@angular/compiler": "~2.1.0",
  "@angular/core": "~2.1.0",
  "@angular/forms": "~2.1.0",
  "@angular/http": "~2.1.0",
  "@angular/platform-browser": "~2.1.0",
  "@angular/platform-browser-dynamic": "~2.1.0",
  "@angular/router": "~3.1.0",
  </code></pre>
  
  <p>Thanks,</p>
  
  <p>Cheers</p>
  
  <p>Gerd</p>