web-dev-qa-db-ja.com

Angular 2 with CLI-build for production

新たにangle-cli 1.0.0.beta.17（最新のもの）をインストールし、新しいプロジェクトを開始し、ポート4200で問題なくプロジェクトを提供できます-標準の「アプリは動作します！」メッセージ。

ただし、コマンドng build --prodを使用してこの空の汎用アプリケーションを実稼働用にビルドしようとすると、main。*。jsファイルがまったく作成されず、次のような警告画面がいくつか表示されます。

  • 未使用の関数を削除しています...
  • 初期化のサイト効果...
  • 等

これは真新しい空のプロジェクトです-私はまだ何も壊す機会がありませんでした...

製品版をビルドする方法は？

angularbuildproductionangular-cli
26
bensiu

Angular v6 +用に更新されました

# Prod - these are equivalent
ng build --configuration=production
ng build --c=production
ng build --prod=true

# Dev - and so are these
ng build --configuration=development
ng build --c=development
ng build --prod=false
ng build

その他のフラグ設定はこちら

https://angular.io/cli/build

Angular-cliのgithub wiki v2 +ごとに、これらは開発および本番ビルドを開始する最も一般的な方法です

# Prod these are equivalent
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod

# Dev and so are these
ng build --target=development --environment=dev
ng build --dev --env=dev
ng build --dev
ng build

--devと--prodのビルドに影響するさまざまなデフォルトフラグがあります。

Flag                 --dev      --prod
--aot                false      true
--environment        dev        prod
--output-hashing     media      all
--sourcemaps         true       false
--extract-css        false      true

--prodは、以下のフラグなし設定も設定します。

  • .angular-cli.jsonで構成されている場合、Service Workerを追加します。
  • モジュールのprocess.env.NODE_ENVをproduction値に置き換えます（reactのような一部のライブラリに必要です）。
  • コードでUglifyJSを実行します。

AOTを機能させるには、トラブルシューティングを行う必要があります。私が走ったとき：

ng build --prod --aot = false

次のようなエラーが返されます

Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'

もともと、AOTを機能させるには、プロジェクトのリファクタリングが必要でした。ただし、このエラーが発生している場合は修正される可能性があります。試して

npm i [email protected]

https://github.com/angular/angular-cli/issues/711

35
JoeF

使用してみてください：ng build --target = productionこれは動作するはずです。

5
omt66

CLIバージョン（1.0.1）では次を使用します。

ng build --prod

これにより、index.htmlとすべてのバンドルされたjsファイルを含むdistフォルダーが本番用に準備されます。

3
Amit

これを試して

 ng build --env=prod

ビルドシステムはデフォルトでenvironment.tsを使用する開発環境に設定されますが、ng build --env=prodを実行すると、代わりにenvironment.prod.tsが使用されます。

プロジェクトが新しいangular cliアプリの場合のサンプル結果。

 10% building mod3439ms building modules                                                                     1ms add01564ms 917ms asset45ms emittingHash: 9216e76d6f10637c945c                  
Version: webpack 2.1.0-beta.22
Time: 6358ms
            Asset       Size  Chunks             Chunk Names
   main.bundle.js     2.6 MB    0, 2  [emitted]  main
 styles.bundle.js    10.2 kB    1, 2  [emitted]  styles
        inline.js    5.53 kB       2  [emitted]  inline
         main.map    2.61 MB    0, 2  [emitted]  main
       styles.map    14.2 kB    1, 2  [emitted]  styles
       inline.map    5.59 kB       2  [emitted]  inline
       index.html  482 bytes          [emitted]  
assets/.npmignore    0 bytes          [emitted]  
chunk    {0} main.bundle.js, main.map (main) 2.06 MB {1} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.map (styles) 9.96 kB {2} [initial] [rendered]
chunk    {2} inline.js, inline.map (inline) 0 bytes [entry] [rendered]
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  2.82 kB       0       
    chunk    {0} index.html 350 bytes [entry] [rendered]

完了し、angular-cli.jsonのoutDirを変更していない限り、/ distの下にあります。

3
Majid

Aotが実装されているかどうか。

Aotが実装されている場合：

ng build --prod

Aotが実装されていない場合：

ng build --prod --aot=false
1
abahet

最新バージョンのangle-cli、TypeScriptを更新する必要があります。コマンドを使用する場合：

ng build --prod --aot=false

プロジェクトはJITコンパイルをコンパイルし、angular-cliを使用する場合は動作する必要があります。

コマンドでビルドしたい場合

ng build --prod --aot=true

それはAOTコンパイルであり、main.tsファイルを次のように更新する必要があります：

import { enableProdMode } from '@angular/core';
import { platformBrowser }    from '@angular/platform-browser';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowser().bootstrapModuleFactory(AppModule);
1
aimprogman

angular cliを使用してangularアプリケーションを本番モードにビルドするためのコマンドがたくさんあります。

ng build --env = prod

Cmd distでこのコマンドを実行すると、prodビルドに関連するすべての縮小ファイルを含むデフォルトフォルダーが作成されますが、index.htmlにベースパスは設定されません。 index.htmlを変更するには、（。）の追加などの手動変更を行ってください。

<base href="./">

また、angular/CLIコマンドを使用してprodモードでコードをビルドするときにパラメーターを渡すこともできます。

ng build --base-href=./ --env=prod

AOTやビルドオプティマイザーを渡すなど、ビルドするコマンドもあります（バンドルサイズを減らすため）。

ng build --prod --build-optimizer

ビルド後にデフォルトのフォルダー名（dist）を変更する場合は、.angular-cli.jsonのoutDir値を変更できます。
enter image description here

1
Prabhat Maurya

-prodスイッチの使用によって暗示されるAOTが必要です。残念ながら、Angular CLI自体が破損した場合、エラーメッセージは役に立ちません。これは私がそれを解決した方法です：

npm install [email protected]

このページのずっと下にある解決策を見つけました： https://github.com/angular/angular-cli/issues/711

Angular CLIバージョンを少なくとも1.2.6に更新するという言及をいくつか見ました。同様に問題を回避しますが、まだテストしていません。

1
Cobus Kruger

これらは、Javaスクリプトのソースコードまたはプロジェクトで使用しているサードパーティライブラリからのuglify jsの警告です。今は無視できます。

Angular CLIチームは、prodビルドでこれを抑制することに取り組んでいます https://github.com/angular/angular-cli/pull/1609

0
Muralikrishnan