Angularアプリケーションをビルドする(ng build) | mrkmyki＠フリーランスブログ

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目次