title: Do not show API access keys in main.bundle.js
body: <h2>Access keys are visible</h2>
  
  <p>In my application in Angular 6 I work with two APIs where both need a Key or Token to give permission to the available execution methods.</p>
  
  <p>I created the keys inside <code>src/environmets/environment.prod.ts</code>.</p>
  
  <p>My <strong>angular.json</strong>:</p>
  
  <pre><code>                "configurations": {
                      "production": {
                          "fileReplacements": [
                              {
                                  "replace": "src/environments/environment.ts",
                                  "with": "src/environments/environment.prod.ts"
                              }
                          ],
                          "optimization": true,
                          "outputHashing": "all",
                          "sourceMap": false,
                          "extractCss": true,
                          "namedChunks": false,
                          "aot": true,
                          "extractLicenses": true,
                          "vendorChunk": false,
                          "buildOptimizer": true
                      }
                  }
  </code></pre>
  
  <p><strong>environment.prod.ts:</strong></p>
  
  <pre><code>export const environment = {
      production: false,
      hmr: false,
      firebase: {
          apiKey: 'AIzaSyD8-dfxdfxdfxdf3242342342',
          authDomain: 'dfdfd-med.firebaseapp.com',
          databaseURL: 'https://ddfdf-med.firebaseio.com',
          projectId: 'dxdfdfd-dd',
          storageBucket: 'dxxxx-med.appspot.com',
          messagingSenderId: '1041058540005'
      },
      MoipAPI: {
          apiKey: 'Basic VTBRTkJWOUVIMFREQjVGM1sssJTFJddddNBV0dVVEdMMFZEMEhPRzZBRE1TS0k0Q1dYQklRT0VWRlJHR0xUQw==',
      },
  };
  </code></pre>
  
  <p>In my <code>@Injectable()</code> service I care</p>
  
  <pre><code>import {environment} from 'environments / environment';
  </code></pre>
  
  <p>When I do the angular build build with the <code>ng build --prod</code> command when accessing <strong>Developer Tools</strong> from <strong>Google Chrome</strong> in the <strong>Sources</strong> tab, I can see the keys inside <code>main.435fgfd2cxsss.js</code>.</p>
  
  <p>This is a problem since my keys are visible to all, they should not be shown in <code>main.435fgfd2cxsss.js</code>.</p>
  
  <h2>How can I do this in Angular in a safe way?</h2>