typescript Angular 4 ng serve --prod vs ng serve
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45946225/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 4 ng serve --prod vs ng serve
提问by simon
Shortly, I have an app which is 4.6MB on ng serve.
不久，我在 ng serve 上有一个 4.6MB 的应用程序。
When I do:
当我做：
ng serve --prod
ng 服务 --prod
I get 1MB file size.
我得到 1MB 的文件大小。
However, the --prod somehow make my entire application break.
但是，--prod 以某种方式使我的整个应用程序中断。
My whole services (promises based) which send a request to the server are no longer working.
我向服务器发送请求的整个服务（基于承诺）不再工作。
The bizzar thing is that simply ng serveworks perfectly fine ANDcertain parts of ng serve --prodworks fine as well, as long as there is no server request.
该bizzar的是，简单地NG服务工作完全正常和某些地区纳克服务--prod作品也很有效，只要没有服务器的请求。
I do not post any code since ng serveversion works ok.
我没有发布任何代码，因为ng serve版本可以正常工作。
The main question is:
主要问题是：
Why do I get hat kind of behavior?
为什么我会出现类似帽子的行为？
Moreover, at some point, the app based on ng serve --prodsuddenly fully worked out of nowhere and then after I restarted the app, once again, a broken app.
此外，在某些时候，基于ng serve --prod的应用程序突然突然无处可去，然后在我重新启动应用程序后，又一次出现了损坏的应用程序。
EDIT:more EXPLICIT details:
编辑：更多明确的细节：
I am using Fiddler to make sure all of the details are correct:
我正在使用 Fiddler 来确保所有细节都是正确的：
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 serveonly (Network Tab):
现在注意当我只使用ng serve时一切都是如何完美运行的（网络选项卡）：
As you can see, I am already logged in and I do get a response.
如您所见，我已经登录并且确实收到了回复。
Now,
现在，
The moment I do
我做的那一刻
ng serve --prod
ng 服务 --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)
“错误请求”带有一些来自服务器本身的错误代码（我自己的服务器代码，例如“电子邮件未填写”，这也很奇怪，因为我确实发送了正确的参数）
回答by Aniruddha Das
when you did ng serve --prodangular 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
当您执行ng serve --prodangular cli时，使用摇树和 AOT（Ahead Of Time）编译进行生产构建，并生成比正常构建更少的代码。您还可以在本地运行 prod 模式下的样子
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.jsis really small when you did ng serve --prod
意味着它会摇动您的所有组件并添加在您的代码中实际使用过的组件，而不是全部。这就是为什么vendor.js当你这样做时你会看到它真的很小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.
您可以在构建正在做什么的 cli 文档中详细阅读。
回答by Ali Adravi
--prodis the option of build, default is debug mode
--prod是build的选项，默认是debug模式
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 toShowto toshow.
想象一下，toshow 没有在组件上定义，或者我们错误地toShow对toshow.
In this case ng buildand ng servewill work but ng build --prodand ng serve --prodwill give error
在这种情况下ng build，并ng serve可以工作，但ng build --prod并ng serve --prod会给错误
回答by Md Kamrul Hasan Pulok
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.
我们也遇到了类似的问题，并按照这些指南进行了修复。问题是 AOT 不支持 JIT 支持的某些功能。请检查此链接。希望它会帮助你。
https://github.com/rangle/angular-2-aot-sandbox
https://github.com/rangle/angular-2-aot-sandbox
