[Angular] 開発環境の構築 #環境構築

はじめに

本記事は Angular v4.x.x を元に記載しておりその内容は古くなっております。そのため最新の Angular のバージョンが提供する機能と合致しないものがあります｡

最新の情報につきましては Angular 日本語ドキュメンテーションからローカル環境とワークスペースのセットアップをご確認ください。

この記事を実施した環境(2017/12/21 更新)

Windows10 Home 64bit
node ~~v8.2.1~~ v.9.2.1
npm ~~v4.0.5~~ v5.6.0
angular/cli ~~v1.2.6~~ v1.3.0
Angular ~~v4.3.2~~ v4.4.6

Angular の開発環境の構築

基本的に本家サイトのローカル環境とワークスペースのセットアップで記載されている内容の焼き直し｡

前提

node.js がインストールされていること(こちらの記事を参照)

環境構築

Angular-CLI のインストール
```
$ npm install -g @angular/cli
```

バージョンを確認(2017/12/21 更新)

$ ng -v
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
              |___/
@angular/cli: 1.3.0
node: 9.2.1
os: win32 x64
@angular/animations: 4.4.6
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.3.0
@angular/compiler-cli: 4.4.6
@angular/language-service: 4.4.6

Angularアプリケーションのプロジェクト作成

$ ng new my-app
installing ng
  create .editorconfig
  create README.md
  create src\app\app.component.css
  create src\app\app.component.html
  create src\app\app.component.spec.ts
  create src\app\app.component.ts
  create src\app\app.module.ts
  create src\assets\.gitkeep
  create src\environments\environment.prod.ts
  create src\environments\environment.ts
  create src\favicon.ico
  create src\index.html
  create src\main.ts
  create src\polyfills.ts
  create src\styles.css
  create src\test.ts
  create src\tsconfig.app.json
  create src\tsconfig.spec.json
  create src\typings.d.ts
  create .angular-cli.json
  create e2e\app.e2e-spec.ts
  create e2e\app.po.ts
  create e2e\tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Successfully initialized git.
Project 'my-app' successfully created.

アプリケーションの起動

$ cd my-app/
$ ng serve --open # --open はブラウザを起動するオプション

ブラウザを確認
http://localhost:4200 で開発環境のアプリが起動している｡
アプリケーションの停止
次をプロンプトで実行することで終了する｡
```
Ctrl-c
```

IE11対応(2017/09/02 追記)

Angular ではデフォルトの設定だと IE11 でアプリケーションを利用できない。これは IE11 以前では Angular で使用している機能が対応されていないため。
解決のためには Polyfill の設定をしてやる必要がある。
で、その設定は下記で行う。

src/polyfills.ts を編集する。

src/polyfills.ts(編集前)

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';

src/polyfills.ts(編集後)

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

といった具合に、IE9 ～のコメントから始まるブロックの imort 実行がコメントアウトされているので、それらを外して有効化する。
これで IE11 でも Angular アプリを利用することができる。

終わりに

ここまでで Angular の開発環境の構築は完了｡
あとはプロジェクトにあわせてライブラリを追加していく感じ｡

参考

Angular のチュートリアルは英語なのでとっつきにくい方もいると思うので次を参考情報としてあげる｡

ng-japan が提供してくれているハンズオン教材
- https://github.com/ng-japan/hands-on/

その他

Angular は TypeScript で開発を進めていくわけだが､当然ブラウザで実行するためのトランスパイルの問題が出てくる｡
ただ Angula-CLI でプロジェクトを構築した場合､ webpack ベースとなっているためトランスパイルについて(最初は)意識せずに済む｡
こまかいチューニングとかをしたいケースとかは webpack の設定を抽出して変更することもあるだろうけれど､自分はまだそこまでのケースに至ってないのでこの記事では割愛｡