[解決済み] Angularアプリを本番用にバンドルする方法

質問

Angular（バージョン2、4、6、...）をライブのウェブサーバー上で本番用にバンドルするための最良の方法は何でしょう。

回答にはAngularのバージョンを含めてください。

解決方法は？

2 to 13 (TypeScript)をAngular CLIで使用する

一回限りのセットアップ

• npm install -g @angular/cli
• ng new projectFolder 新しいアプリケーションを作成します

バンドルステップ

• ng build (コマンドラインでの実行は、ディレクトリが projectFolder ).

  フラグ prod バンドルがデフォルトになりました ( Angularのドキュメント を使用して、必要に応じてカスタマイズしてください)。

• を使用して圧縮します。 ブロートリ圧縮 は、次のコマンドを使用してリソースを取得します。

  for i in dist/*/*; do brotli $i; done

バンドルは、デフォルトで projectFolder/dist(/$projectFolder v6+の場合) **

出力

Angularを使用したサイズ 13.2.4 CLIを使用した場合 13.2.4 およびAngularルーティングを使用しないオプションCSS

• dist/main-[es-version].[hash].js バンドルされているあなたのアプリケーション [ ES5 size: 132 KB for new Angular CLI application empty, 39 KB 圧縮]されています。
• dist/polyfill-[es-version].[hash].bundle.js ポリフィルの依存関係 (@angular, RxJS...) がバンドルされています [ ES5 サイズ: 新しい Angular CLI アプリケーションで 37 KB 空です。 12 KB 圧縮]されています。
• dist/index.html アプリケーションのエントリポイントです。
• dist/runtime-[es-version].[hash].bundle.js ウェブパックローダ
• dist/style.[hash].bundle.css スタイル定義
• dist/assets Angular CLIのassets設定からコピーされたリソース

デプロイメント

を取得することができます。 プレビュー を使用して、アプリケーションの ng serve --prod コマンドを実行すると、ローカルの HTTP サーバーが起動し、本番ファイルを含むアプリケーションに http://localhost:4200 でアクセスできるようになります。 これは本番使用には安全ではありません。

実運用では、すべてのファイルを dist フォルダを任意のHTTPサーバーに設置します。