web-dev-qa-db-ja.com

Angular 4 ng serve --prod vs ng serve

まもなく、ng serveで4.6MBのアプリがあります。

私がする時：

ng serve --prod

1MBのファイルサイズを取得します。

ただし、-prodを使用すると、アプリケーション全体が壊れます。

サーバーにリクエストを送信する（約束ベースの）サービス全体が機能しなくなりました。

奇妙なことは、単にng serveが完全にうまく動作することです[〜＃〜] and [〜＃〜]ng serveの特定の部分--prodは、サーバー要求がない限り問題なく動作します。

ng serveバージョンが正常に動作するため、コードを投稿しません。

主な質問は次のとおりです。

帽子のような行動をするのはなぜですか？

さらに、ある時点で、ng serve --prodに基づいたアプリが突然どこからでも完全に機能し、アプリを再起動した後、もう一度、壊れたアプリ。

EDIT：その他の明示的な詳細：

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

これは超奇妙です。

サーバー要求を担当する私のメソッドはすべて同じです。

「Bad Request」サーバー自体からのエラーコード（「email not Filled」のような自分のサーバーコード）正しいパラメーターを送信してください）

javascriptangulartypescriptwebpackangular-cli
8
simon

--prodはビルドのオプションで、デフォルトはデバッグモードです

アプリケーションが壊れる理由の例を見てみましょう。次のようなコードがあります。

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

toshowがコンポーネント上で定義されていないか、誤ってtoShowからtoshowと言うタイプミスをしたと想像してください。

この場合 ng buildおよびng serveは機能しますが、ng build --prodおよびng serve --prodエラーが発生します

2
Ali Adravi

また、同様の問題に直面し、これらのガイドラインに従って修正しました。問題は、AOTはJITがサポートする一部の機能をサポートしていないことです。このリンクを確認してください。うまくいけばそれがあなたを助けるでしょう。

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

Angular DOC AOT制限について

1
Md Kamrul Hasan Pulok

いつng serve --prod angular cliがツリーの揺れとAOT（Ahead Of Time）コンパイルを使用して本番ビルドを作成します

すべてのコンポーネントをツリーシェイクし、コードで実際に使用したコンポーネントをすべて追加するわけではありません。 ng serveを実行したとき、vendor.jsが実際にいくつかであることがわかります

どのビルドが何をしているのかをCLIのドキュメントで詳しく読むことができます。

1
Aniruddha Das