Angularアプリのルートディレクトリでng build コマンドを実行することで、Angularアプリをビルドできます。
デフォルトではdist/アプリ名 のディレクトリ以下にビルドされたjsファイル等が作られます。
>ng build Date: 2018-10-31T14:18:25.398Z Hash: 3cf0fe6fa6dc02b8d18f Time: 21244ms chunk {main} main.js, main.js.map (main) 15.4 kB [initial] [rendered] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 228 kB [initial] [rendered] chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered] chunk {styles} styles.js, styles.js.map (styles) 16.6 kB [initial] [rendered] chunk {vendor} vendor.js, vendor.js.map (vendor) 3.39 MB [initial] [rendered]
出力されたファイルのindex.htmlを参考に、ビルド済のjsファイルを使いましょう。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Angular</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root></app-root> <script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script> </body> </html>
各種jsファイルをロードして、<app-root></app-root>の部分に作成したAngularアプリが表示されるようになっています。
逆引きAngular目次
ngコマンド(Angular CLI)
Angularアプリケーションを起動する(ng serve)
Angularアプリケーションをビルドする(ng build)
Angularでファイルが変更されたら自動的にビルドする(ng build –watch)
Angularのコンポーネントを追加する(ng generate component [コンポーネント名])
Angularのサービスを追加する(ng generate service [サービス名])
テンプレート
Angularのngifでtrueとfalseの場合ごとにテンプレートを切り替える
フォーム
Angularでフォームに入力した値をリアルタイムに表示する