title: Angular 4 ng serve --prod vs ng serve
body: <p>Shortly, I have an app which is 4.6MB on ng serve.</p>
  
  <p>When I do:</p>
  
  <blockquote>
    <p>ng serve --prod</p>
  </blockquote>
  
  <p>I get 1MB file size.</p>
  
  <p>However, the --prod somehow make my entire application break.</p>
  
  <p>My whole services (promises based) which send a request to the server are no longer working.</p>
  
  <p>The bizzar thing is that simply <strong>ng serve</strong> works perfectly fine <strong>AND</strong> certain parts of <strong>ng serve --prod</strong> works fine as well, as long as there is no server request.</p>
  
  <p>I do not post any code since <strong>ng serve</strong> version works ok.</p>
  
  <p>The main question is: </p>
  
  <p>Why do I get hat kind of behavior?</p>
  
  <p>Moreover, at some point, the app based on <strong>ng serve --prod</strong> suddenly fully worked out of nowhere and then after I restarted the app, once again, a broken app.</p>
  
  <p><strong>EDIT:</strong> <strong>more EXPLICIT details:</strong></p>
  
  <p>I am using Fiddler to make sure all of the details are correct:</p>
  
  <p><a href="https://i.stack.imgur.com/Zsqe8.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Zsqe8.png" alt="Fiddler pic"></a></p>
  
  <p>As you can see, details are ok.</p>
  
  <p>Now for the code which responsible to simulate that request on the client side:</p>
  
  <pre><code>    login(uName: string, pw: string, type: number): Promise&lt;any&gt; {
      return new Promise(resolve =&gt; {
          if (type === 1) {
              const options = new RequestOptions({ headers: this.headers });
              const body = JSON.stringify({ username: uName, password: pw });
              this.http.post(this.loginUrl, body, options)
                  .toPromise()
                  .then(response =&gt; {
                      resolve(response);
                  })
                  .catch(this.handleError);
          } else if (type === 2 || type === 3) {
              this.http.post(this.loginUrl, { username: uName, token: pw })
                  .toPromise()
                  .then(response =&gt; {
                      resolve(response);
                  })
                  .catch(this.handleError);
          }
      });
  }
  </code></pre>
  
  <p>Now notice how everything works perfect when I use <strong>ng serve</strong> only (Network Tab):</p>
  
  <p><a href="https://i.stack.imgur.com/SMvaP.png" rel="noreferrer"><img src="https://i.stack.imgur.com/SMvaP.png" alt="ng serve"></a></p>
  
  <p>As you can see, I am already logged in and I do get a response.</p>
  
  <p>Now,</p>
  
  <p>The moment I do </p>
  
  <blockquote>
    <p>ng serve --prod</p>
  </blockquote>
  
  <p>Suddenly the same login request with the same details no longer works:</p>
  
  <p><a href="https://i.stack.imgur.com/3z9Cc.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/3z9Cc.jpg" alt="ng serve --prod"></a></p>
  
  <p>This is super bizzar.</p>
  
  <p>All of my methods which are responsible for server requests are all the same.</p>
  
  <p><strong>"Bad Request"</strong> with some error code that comes from the server itself (my own server code like "email not filled" which is also bizzar since I do send the correct parameters)</p>