LoginSignup
0

More than 5 years have passed since last update.

Angular5 で俺式 KOAN スタック Webアプリ構築(1)

Last updated at Posted at 2018-03-20

Angular5 初期設定

Angular5で「俺式KOANスタック」でWebアプリ構築するための個人的な備忘録記事。
概要については「こちら」を参照。

事前準備

  • Node.js のダウンロード、インストールする(ここでは手順を割愛)
  • Node.js 標準のパッケージ管理「npm」を最新化する
npm最新化コマンド
npm install -g npm
npmバージョン確認
npm -version
  • 公式の構築支援ツール「angular-cli」をインストール。ngコマンドが使える様になる
npm install -g @angular/cli

※ 本記事が古くなり、angular-cli のバージョンが上がることによって、Angular5以降のバージョンで構築されてしまう可能性があるので、その場合はご自身で対応してください

Angular バージョン確認

以下のコマンドで、Angular が「5.x」になっているか確認する(「4.x」以下であれば古い)

Angularバージョン確認
ng -v
コマンド結果
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.7.3
Node: 8.6.0
OS: win32 x64
Angular: 5.2.8   ← ← ← ←【ここが Angular のバージョン】
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

@angular/cli: 1.7.3
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

※ まだAngularプロジェクトが未作成で空っぽの場合は、おそらく、上記の様にズラリと結果が出ないため、その場合は気にせず次に進んでください。

プロジェクト作成

  • 任意のディレクトリを作成して、その中に移動し、新規アプリプロジェクトを生成
新規プロジェクト生成
ng new 任意のプロジェクト名 --style=css --routing=true

モジュールのインストール(npm install)まで行うため、処理完了までに 3~4分ほどかかる

  • オプション
    • --style:スタイル言語の指定(CSSの場合は省略可): css, scss
    • --routing:ルーティングモジュール付きで生成する場合: true(falseの場合は省略可)

動作確認

  • 作成したディレクトリに移動し、サーバ起動
サーバ起動
cd 作成したプロジェクト名
ng serve
  • http://localhost:4200 でAngularテストページが表示されたら成功。
  • Ctrl + C でサーバ終了。

ここまでが Angular5 の標準的な初期設定。

次に、KOANを前提としたフロントエンドの構築をする

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0