Angular 4 ng serve --prod vs ng serve

Question

很快，我在 ng serve 上有一個 4.6MB 的應用程序。

當我這樣做時：

ng 服務 --prod

我得到 1MB 的文件大小。

但是，--prod 以某種方式使我的整個應用程序中斷。

我向服務器發送請求的整個服務（基於承諾）不再工作。

該bizzar的是，簡單地NG服務工作完全正常和NG的某些部分服務--prod作品也很有效，只要沒有服務器的請求。

我沒有發布任何代碼，因為ng serve版本可以正常工作。

主要問題是：

為什么我會出現類似帽子的行為？

此外，在某些時候，基於ng serve --prod的應用程序突然突然無處可去，然后在我重新啟動應用程序后，再次出現了一個損壞的應用程序。

編輯：更多明確的細節：

我正在使用 Fiddler 來確保所有細節都是正確的：

如您所見，細節沒問題。

現在是負責在客戶端模擬該請求的代碼：

    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 服務 --prod

突然，具有相同詳細信息的相同登錄請求不再有效：

這是超級怪異。

我所有負責服務器請求的方法都是一樣的。

“錯誤請求”帶有一些來自服務器本身的錯誤代碼（我自己的服務器代碼，如“電子郵件未填寫”，這也很奇怪，因為我確實發送了正確的參數）

Answer 1

當您執行ng serve --prod angular cli 時，使用搖樹和 AOT（Ahead Of Time）編譯進行生產構建，並生成比正常構建更少的代碼。 您還可以在本地運行 prod 模式下的樣子

意味着它會搖動您的所有組件並添加在您的代碼中實際使用過的組件，而不是全部。 這就是為什么當你執行ng serve --prod時你會看到vendor.js真的很小

缺點是它的可調試性較低，因為它的編譯和縮小代碼

您可以在構建正在做什么的 cli 文檔中詳細閱讀。

Answer 2

--prod是build的選項，默認是debug模式

讓我們看一個為什么應用程序中斷的例子，看看我們有這樣的代碼：

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

想象一下，toshow未在組件上定義或錯誤，我們做了一個錯字說toShow到toshow 。

在這種情況下， ng build和ng serve將起作用，但ng build --prod和ng serve --prod會出錯

Answer 3

我們也遇到了類似的問題，並按照這些指南進行了修復。 問題是 AOT 不支持 JIT 支持的某些功能。 請檢查此鏈接。 希望它會幫助你。

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

關於 AOT 限制的 Angular DOC