Works by

Ren's blog

@rennnosuke_rk 技術ブログです

【Angular】Angular CLIでライブラリの追加・ビルドを行う

f:id:rennnosukesann:20181224221629p:plain

Angular CLI

詳細は下記記事にて。

rennnosukesann.hatenablog.com

ng add : 外部ライブラリを追加する

ng add を使用すると、Angularプロジェクトへの外部ライブラリの追加を行えます(複数指定可能)。 Installing packages for tooling via npm. の文言から、結局 npm 経由でパッケージインストールしていることがわかります。

$ ng add @angular/material @angular/cdk @angular/animations
Installing packages for tooling via npm.

package.json にも依存関係が記述されていることがわかります。

$ cat package.json | grep -E "material|cdk|animations" 
    "@angular/animations": "~7.1.0",
    "@angular/cdk": "~7.2.0",
    "@angular/material": "^7.2.0",

ng build : アプリをビルドする

ng build でAngularプロジェクトをビルドし、 /dist ディレクトリ配下にビルド済みファイルを出力します。

$ ng build
                                                                                          
Date: 2018-12-24T16:20:03.523Z
Hash: bb05af5cc5e75024ef83
Time: 13417ms
chunk {main} main.js, main.js.map (main) 10.9 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 223 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 179 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.69 MB [initial] [rendered]

 $ ls dist
my-angular-app

ng update : Angularプロジェクト及び依存ライブラリのバージョンをアップデートする

ng update コマンドを実行すると、Angularアプリ及びアプリが依存するライブラリのバージョンをアップデートします。

$ ng update
    We analyzed your package.json and everything seems to be in order. Good work!

参考文献

Angular Docs