簡単！Angular2環境構築
2018/08/31
はじめに
今日はangular-cliを使ったAngular2環境構築についてお話しします。
びっくりするぐらい簡単ですよΣ(ﾟДﾟ)
作業環境はこちら↓↓↓
- Windows 8.1
- NodeJS 6.8.1
- npm 3.10.8
環境構築
・作業準備
まず必要なパッケージをインストールします。
$ npm install -g angular-cli $ npm install -g typings
・構築作業
構築作業をはじめますщ(ﾟДﾟщ)
$ mkdir [フォルダ名] & cd [フォルダ名] $ ng new [プロジェクト名] installing ng2 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\app\index.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.json create src\typings.d.ts create angular-cli.json create e2e\app.e2e-spec.ts create e2e\app.po.ts create e2e\tsconfig.json create .gitignore create karma.conf.js create package.json create protractor.conf.js create tslint.json Successfully initialized git. Installing packages for tooling via npm. Installed packages for tooling via npm.
なにやらいろいろ作っているようです....しばし待ちましょう( ´・ω・｀)つ且
プロジェクトの構築が終わったらサーバーを起動しましょう
$ ng serve
** NG Live Development Server is running on http://localhost:4200. **
4376ms building modules
45ms sealing
0ms optimizing
3ms basic module optimization
83ms module optimization
1ms advanced module optimization
13ms basic chunk optimization
2ms chunk optimization
2ms advanced chunk optimization
0ms module and chunk tree optimization
97ms module reviving
7ms module order optimization
4ms module id optimization
3ms chunk reviving
1ms chunk order optimization
11ms chunk id optimization
42ms hashing
0ms module assets processing
93ms chunk assets processing
0ms additional chunk assets processing
0ms recording
0ms additional asset processing
1316ms chunk asset optimization
89ms asset optimization
18ms emitting
Hash: 8c4306887527f590ca08
Version: webpack 2.1.0-beta.25
Time: 6224ms
Asset Size Chunks Chunk Names
main.bundle.js 2.72 MB 0, 2 [emitted] main
styles.bundle.js 10.3 kB 1, 2 [emitted] styles
inline.bundle.js 5.54 kB 2 [emitted] inline
main.bundle.map 2.81 MB 0, 2 [emitted] main
styles.bundle.map 14 kB 1, 2 [emitted] styles
inline.bundle.map 5.6 kB 2 [emitted] inline
index.html 484 bytes [emitted]
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 2.81 kB 0
webpack: bundle is now VALID.
[default] Checking started in a separate process...
[default] Ok, 1.298 sec.
サーバー起動に成功したら「http://localhost:4200」にアクセスしましょう。
画面に「app works!」と表示されるはずです。
これで環境構築は終了です。Angular2開発を始められるようになりました！
・試しにタイトルを変更してみると・・・・
自動で再コンパイル＆ブラウザリロードが走り、変更が反映されます。便利ですね～
・ビルドしてみる
$ ng build --prod
プロジェクト作成時作られたフォルダに「dist」フォルダが作られ、リリース版のソースが保存されます。JSやCSSも圧縮されていてイイ感じです。
ビルドだけしたいという場合には「--prod」を外してコマンドを実行してください。
さいごに
こんなに簡単にできてしまいました(´・ω・｀)
私のPCでは諸々の前提作業は済んでいましたので10分弱で終了です。
前提作業から始めるとしても30分ほどで終わってしまうのではないでしょうか。
環境構築ですらお手軽Angular2...恐るべし。
◆クラウドインテグレーションサービス「雲斗」以下のページからアクセス出来ます。
https://www.kumoto.jp/
