angular-cliでAngular2の環境をビルドしてHelloWorldをブラウザで見るまで
angular-cliでAngular2の環境をビルドしてHelloWorldをブラウザで見るまでを書きます。
nodeとnpmの最新が入っていない場合、
$ rpm -Uvh https://rpm.nodesource.com//pub_5.x/el/6/x86_64/nodesource-release-el6-1.noarch.rpm $ yum -y install nodejs $ node -v > 6系が入っていればOK
nodeを最新に
$ npm install -g n $ n stable で最新版のnodeがインストールされる。 $ node -v > v6.4.0
npmも最新に。
$ npm update -g npm で、npm自身が最新になる $ npm -v > 3.10.7
angular-cliをインストールする
$ npm install -g angular-cli $ ng -v >angular-cli: 1.0.0-beta.10 >node: 6.4.0 >os: linux x64
angularのプロジェクト作成
$ mkdir -p /path/to/xxxxx $ cd /path/to/xxxxx $ ng new your-ng-app $ cd your-ng-app
ビルドと、ビルトインサーバーの動作確認(モジュール不足の場合、ここでエラーが出てしまう)
$ ng build > エラーが出なければOK $ ng serve > エラーが出なければOK
上記実行時のエラーの対処法について
基本的には、
$ npm install $ typings install $ npm link angular-cli
で、ng buildとng serveが通るようになってブラウザで確認できるはず。
→ ソースを編集すると即時にビルドされてブラウザが自動でリロードされて、修正内容が反映される。
プロジェクト直下で
$ ng build $ ng serve
が動くようになってブラウザでapp works!
の文字列が表示される。 はず。
HelloWorldに変更したい場合は、
>> src/app/app.component.ts
内の文字列app works!をhello worldに変えればOK!