色々なところで 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 のチュートリアルやってみる!