Angular 4 をさっそく使ってみよう！

色々なところで Angular 2 での開発案件も多くなり、勉強している方も多いと思いますが Angular 4 も 4.0.0-beta.8 ということで遊びがてら触るのもいいかなと思える今日このごろだと思います。angular-cli も Angular 4 対応をはじめてますので軽く触れる状態ではありますので、早速。

angular-cli のインストール

angular-cli はインストール方法（という言い方は正しくないです）が変わってます。既に古いバージョンの angular-cli をインストール済みの方は下記のように行ってください

$ npm uninstall -g angular-cli
$ npm cache clear
$ npm install -g @angular/cli

Node.js のバージョンは 6.9.0 以上です。

プロジェクトの生成

angular-cli がインストールされたらプロジェクトを生成します。

$ ng new AngularApp --ng4 --skip-install

--ng4 スイッチを使って Angular 4 をインストールします。 --skip-installスイッチは yarn インストールさせたいので npm インストールを止めてます。テンプレートが出力されたら yarn を実行します

$ cd AngularApp
$ yarn

最後に ng serve でアプリケーションを起動すれば Hello World 的な画面が出力されます。この程度で「使ってみよう！」という表現を使っていることに陳謝（スミマセン！スミマセン！スミマセン！）

yarn は、、、

$ ng serve
** NG Live Development Server is running on http://localhost:4200. **
 10% building modules 6/7 modules 1 active ...lient/index.js?http://localhost:4200/(node:72221) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
Hash: e8344727583b341c6c98                                                               
Time: 11139ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 155 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 3.79 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 10.1 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 3.09 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

ERROR in Could not resolve module @angular/core/src/di/opaque_token

npm に変更して実行した結果はこちらでいつもの通り

angular.io のチュートリアルやってみる！