isTKS™javascript,linux,program ≫ angular-cliでAngular2の環境をビルドしてHelloWorldをブラウザで見るまで

angular-cliでAngular2の環境をビルドしてHelloWorldをブラウザで見るまで

2016.08.25

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!


プロジェクトでの開発にsassを使う場合はこちら

  • このエントリーをはてなブックマークに追加