Angular Version 5.1.4 をセットアップしてみた

NO IMAGE

以前、AngularJS1.3 を使っていましたが、それ以降使っていなかったので、
今回、最新版のVersion 5.1.4をさわってみました。

今回は、セットアップまでの流れを記載します。

セットアップ環境

セットアップ環境は、こちらです。

macOS High Sierra Version 10.13.2
Homebrew 1.4.2

npmインストール

まずは、Homebrewを使ってnpmをインストールします。

Homebrewがインストールされていない方は、
以下をご覧いただき、インストールをしてください。

https://52.198.100.49/405/

$ brew install npm

実行結果ログ

Updating Homebrew...
==> Auto-updated Homebrew!
Updated 2 taps (heroku/brew, homebrew/core).
==> New Formulae
arcade-learning-environment monero
auditbeat [email protected]
~~~~~~~~~~
liblcf zstd
liblinear zurl
libmicrohttpd
==> Renamed Formulae
camlistore -> perkeep
==> Deleted Formulae
angolmois [email protected] ponscripter-sekai stklos
==> Installing dependencies for node: icu4c
==> Installing node dependency: icu4c
==> Downloading https://homebrew.bintray.com/bottles/icu4c-60.2.high_sierra.bott
######################################################################## 100.0%
==> Pouring icu4c-60.2.high_sierra.bottle.tar.gz
==> Caveats
This formula is keg-only, which means it was not symlinked into /usr/local,
because macOS provides libicucore.dylib (but nothing else).
If you need to have this software first in your PATH run:
echo 'export PATH="/usr/local/opt/icu4c/bin:$PATH"' >> ~/.bash_profile
echo 'export PATH="/usr/local/opt/icu4c/sbin:$PATH"' >> ~/.bash_profile
For compilers to find this software you may need to set:
LDFLAGS: -L/usr/local/opt/icu4c/lib
CPPFLAGS: -I/usr/local/opt/icu4c/include
==> Summary
/usr/local/Cellar/icu4c/60.2: 249 files, 67MB
==> Installing node
==> Downloading https://homebrew.bintray.com/bottles/node-9.3.0_1.high_sierra.bo
######################################################################## 100.0%
==> Pouring node-9.3.0_1.high_sierra.bottle.tar.gz
==> Caveats
Bash completion has been installed to:
/usr/local/etc/bash_completion.d
==> Summary
/usr/local/Cellar/node/9.3.0_1: 5,125 files, 49.6MB

angular CLI インストール

angularのコマンドラインインターフェイスCLI)をインストールします。

$ npm install -g @angular/cli

実行結果ログ

/usr/local/bin/ng -> /usr/local/lib/node_modules/@angular/cli/bin/ng
> [email protected] install /usr/local/lib/node_modules/@angular/cli/node_modules/fsevents
> node install
[fsevents] Success: "/usr/local/lib/node_modules/@angular/cli/node_modules/fsevents/lib/binding/Release/node-v59-darwin-x64/fse.node" is installed via remote
> [email protected] install /usr/local/lib/node_modules/@angular/cli/node_modules/node-sass
> node scripts/install.js
Downloading binary from https://github.com/sass/node-sass/releases/download/v4.7.2/darwin-x64-59_binding.node
Download complete ░⸩ ⠋ :
Binary saved to /usr/local/lib/node_modules/@angular/cli/node_modules/node-sass/vendor/darwin-x64-59/binding.node
Caching binary to /Users/nonoichi/.npm/node-sass/4.7.2/darwin-x64-59_binding.node
> [email protected] postinstall /usr/local/lib/node_modules/@angular/cli/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js
> [email protected] postinstall /usr/local/lib/node_modules/@angular/cli/node_modules/node-sass
> node scripts/build.js
Binary found at /usr/local/lib/node_modules/@angular/cli/node_modules/node-sass/vendor/darwin-x64-59/binding.node
Testing binary
Binary is fine
+ @angular/cli@1.6.3
added 996 packages in 46.148s

新規プロジェクト作成

nonoichi-app という名称の新規プロジェクトを作成します。

$ ng new nonoichi-app

実行結果ログ

create nonoichi-app/README.md (1027 bytes)
create nonoichi-app/.angular-cli.json (1247 bytes)
create nonoichi-app/.editorconfig (245 bytes)
create nonoichi-app/.gitignore (516 bytes)
create nonoichi-app/src/assets/.gitkeep (0 bytes)
create nonoichi-app/src/environments/environment.prod.ts (51 bytes)
create nonoichi-app/src/environments/environment.ts (387 bytes)
create nonoichi-app/src/favicon.ico (5430 bytes)
create nonoichi-app/src/index.html (298 bytes)
create nonoichi-app/src/main.ts (370 bytes)
create nonoichi-app/src/polyfills.ts (2405 bytes)
create nonoichi-app/src/styles.css (80 bytes)
create nonoichi-app/src/test.ts (1085 bytes)
create nonoichi-app/src/tsconfig.app.json (211 bytes)
create nonoichi-app/src/tsconfig.spec.json (304 bytes)
create nonoichi-app/src/typings.d.ts (104 bytes)
create nonoichi-app/e2e/app.e2e-spec.ts (294 bytes)
create nonoichi-app/e2e/app.po.ts (208 bytes)
create nonoichi-app/e2e/tsconfig.e2e.json (235 bytes)
create nonoichi-app/karma.conf.js (923 bytes)
create nonoichi-app/package.json (1324 bytes)
create nonoichi-app/protractor.conf.js (722 bytes)
create nonoichi-app/tsconfig.json (363 bytes)
create nonoichi-app/tslint.json (3040 bytes)
create nonoichi-app/src/app/app.module.ts (316 bytes)
create nonoichi-app/src/app/app.component.css (0 bytes)
create nonoichi-app/src/app/app.component.html (1141 bytes)
create nonoichi-app/src/app/app.component.spec.ts (986 bytes)
create nonoichi-app/src/app/app.component.ts (207 bytes)
Installing packages for tooling via npm.
> [email protected] install /Users/nonoichi/nonoichi-app/node_modules/fsevents
> node install
[fsevents] Success: "/Users/nonoichi/nonoichi-app/node_modules/fsevents/lib/binding/Release/node-v59-darwin-x64/fse.node" is installed via remote
> [email protected] install /Users/nonoichi/nonoichi-app/node_modules/node-sass
> node scripts/install.js
Cached binary found at /Users/nonoichi/.npm/node-sass/4.7.2/darwin-x64-59_binding.node
> [email protected] postinstall /Users/nonoichi/nonoichi-app/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js
> [email protected] postinstall /Users/nonoichi/nonoichi-app/node_modules/node-sass
> node scripts/build.js
Binary found at /Users/nonoichi/nonoichi-app/node_modules/node-sass/vendor/darwin-x64-59/binding.node
Testing binary
Binary is fine
added 1168 packages in 45.385s
Installed packages for tooling via npm.
Successfully initialized git.
Project 'nonoichi-app' successfully created.

ローカルサーバ起動

angularに搭載されている、ローカルサーバ機能を使って、サーバ起動を行います。
まずは、ディレクトリ移動を行い、サーバ起動コマンドを実行します。

$ cd nonoichi-app/
$ ng serve --open

実行結果ログ

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
10% building modules 8/11 modules 3 active ...ode_modules/style-loader/addStyles.jswebpack: wait until bundle finished: /
Date: 2018-01-06T06:31:54.760Z
Hash: fadd2eaaf54fd275e006
Time: 9733ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 19.5 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 557 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 33.8 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 7.16 MB [initial] [rendered]
webpack: Compiled successfully.

 

自動的にブラウザが立ち上がり、下記画面が表示されました。
URLは、「http://localhost:4200」となっています。

 

参考サイト

angular 公式サイト:https://angular.io/quickstart

Web技術カテゴリの最新記事