Angular 4 ng serve --prod vs ng serve

Question

Shortly, I have an app which is 4.6MB on ng serve.

When I do:

ng serve --prod

I get 1MB file size.

However, the --prod somehow make my entire application break.

My whole services (promises based) which send a request to the server are no longer working.

The bizzar thing is that simply ng serve works perfectly fine AND certain parts of ng serve --prod works fine as well, as long as there is no server request.

I do not post any code since ng serve version works ok.

The main question is:

Why do I get hat kind of behavior?

Moreover, at some point, the app based on ng serve --prod suddenly fully worked out of nowhere and then after I restarted the app, once again, a broken app.

EDIT: more EXPLICIT details:

I am using Fiddler to make sure all of the details are correct:

As you can see, details are ok.

Now for the code which responsible to simulate that request on the client side:

    login(uName: string, pw: string, type: number): Promise<any> {
    return new Promise(resolve => {
        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 => {
                    resolve(response);
                })
                .catch(this.handleError);
        } else if (type === 2 || type === 3) {
            this.http.post(this.loginUrl, { username: uName, token: pw })
                .toPromise()
                .then(response => {
                    resolve(response);
                })
                .catch(this.handleError);
        }
    });
}

Now notice how everything works perfect when I use ng serve only (Network Tab):

As you can see, I am already logged in and I do get a response.

Now,

The moment I do

ng serve --prod

Suddenly the same login request with the same details no longer works:

This is super bizzar.

All of my methods which are responsible for server requests are all the same.

"Bad Request" 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)

Answer 1

when you did ng serve --prod angular cli make a production build with tree shaking and AOT (Ahead Of Time) compilation and generate less code compare to normal build. You also run in local what it will be like in prod mode

Means it tree shake all your components and added which ever actually used in your code, not all. That's why you see the vendor.js is really small when you did ng serve --prod

disadvantage is it is less debuggable as its compiled and minified code

you can read in detail in the cli documentation which build is doing what.

Answer 2

--prod is the option of build, default is debug mode

Let's see an example why application breaks, see we have code like this:

<div (click)="toshow = !toShow">Toggle</div>

imagine, toshow is not defined on the component or by mistake we did a typo say toShow to toshow.

In this case ng build and ng serve will work but ng build --prod and ng serve --prod will give error

Answer 3

We also faced similar issue and fixed by following these guidelines. The issue is AOT do not support some features which JIT supports. Please check this link. hopefully it will help you.

https://github.com/rangle/angular-2-aot-sandbox

Angular DOC About AOT Restrictions