Angular5初始设置

用Angular5构建我个人备忘录的文章，标题是“俺式KOAN堆栈”的Web应用构建。关于概述，请参考“这里”。

事前准备

Node.js のダウンロード、インストールする（ここでは手順を割愛）
Node.js 標準のパッケージ管理「npm」を最新化する

npm install -g npm

npm -version

公式の構築支援ツール「angular-cli」をインストール。ngコマンドが使える様になる

npm install -g @angular/cli

※ 由于本文可能会变得过时，并且随着 angular-cli 版本的升级，可能会在 Angular5 之后的版本中构建，所以请自行进行相应的处理。

确认 Angular 版本。

使用以下命令，检查Angular版本是否为“5.x”（如果是“4.x”或者更旧则表示较旧）。

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 でサーバ終了。

这是Angular 5的标准初始设置。

接下来，我们将基于KOAN来构建前端。