Angular 4 ng serve --prod vs ng serve

13

简而言之,我有一个应用程序,在ng serve上的大小为4.6MB。

当我执行以下命令时:

ng serve --prod

文件大小变成1MB。

然而,--prod会导致整个应用程序崩溃。

我的所有服务(基于promises)不再起作用,它们发送的请求到服务器也无法正常工作。

奇怪的是,只要没有服务器请求,简单的ng serveng serve --prod的某些部分都能够很好地工作。

我没有发布任何代码,因为ng serve版本可以正常工作。

主要问题是:

为什么会有这种行为?

此外,在某些时候,基于ng serve --prod的应用程序突然完全正常运行,然后在我重新启动应用程序后,又变为破碎的应用程序。

编辑: 更明确的细节:

我使用Fiddler确保所有详细信息都是正确的:

Fiddler pic

如您所见,详细信息是正确的。

现在来看客户端代码,其中负责模拟该请求的代码:

    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);
        }
    });
}

现在请注意,当我仅使用ng serve时,一切都能完美运行(网络选项卡):

ng serve

正如您所看到的,我已经登录并且确实收到响应。

现在,

当我执行以下命令时

ng serve --prod

突然间,相同的登录请求和相同的详细信息不再起作用:

ng serve --prod

这太奇怪了。

所有负责服务器请求的方法都是相同的。

“坏请求”附带了一些错误代码,来自服务器本身(例如我的服务器代码中的“未填写电子邮件”,这也很奇怪,因为我确实发送了正确的参数)


你比较了生产环境和开发环境的webpack配置文件吗? - rootkill
我知道我忘了什么。@AmanArora - 我正在使用Angular-CLI。 - simon
在导航/检索数据时,您会遇到哪些错误? - DeborahK
@DeborahK 你好 Deborah,我刚刚编辑了我的帖子并添加了更多信息。 - simon
3个回答

8
当您执行 ng serve --prod 命令时,Angular CLI 会使用树摇和预编译(AOT)技术进行生产构建并生成比普通构建更少的代码。同时,您还可以在本地运行以像在生产模式下一样运行应用。
这意味着它只添加了实际在代码中使用的组件,并对其进行了树摇处理,而不是全部添加。这就是为什么在执行 ng serve --prod 命令时,您会看到 vendor.js 文件非常小的原因。
缺点是由于代码是经过编译和压缩的,所以很难进行调试。
您可以在CLI文档中详细了解每个构建有哪些作用。

嗨,感谢您的回复。我已经知道了这一点。我想要这种行为。然而,我真的不明白为什么Tree shaking会导致我的应用程序在服务器请求时崩溃。**编辑:我所有的服务器请求都在“service”文件夹中,其中包含服务文件(.ts扩展名)。服务文件夹位于src/app内,而我有最新的angular-cli。听起来好像它不会包括我的服务,但我确实从服务器获得错误代码。 - simon
嗯,构建过程都不同,在我们的应用程序中也发生了同样的事情。一些代码在生产/ aot 构建中显示错误。因此,在提交代码之前,我们会修复它们。 - Aniruddha Das

4

--prod 是构建的选项,默认为调试模式

让我们看一个应用程序崩溃的例子,假设我们有如下代码:

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

假设在组件中并未定义 toshow,或者由于打错了字母,写成了 toShow 则会发生什么呢?

在这种情况下,ng buildng serve 可以正常工作,但是 ng build --prodng serve --prod 会报错。


1
我在使用“ng serve --prod”后没有出现错误,但是当我进入使用我的服务文件的组件时(每个服务都有自己的通过 Promise 的 get/post 方法),便会出现错误。 - simon

1

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接