Angular4.x开发环境及项目创建（一）

第一次接触Angular4，配置环境的时候就遇到了很多坑，因为之前的版本也没接触过，所以基本上就是零探索，把自己的一些步骤方法写下来。

一.安装Node.js

官方网址：https://nodejs.org/en/download/

• 在命令行中输入：node -v 和 npm -v 验证版本

---

二.全局安装Angular CLI 脚手架工具

• 使用npm命令安装

 npm install -g @angular/cli 

• 安装cnpm

  国内直接装经常会出问题，所以设置为淘宝镜像地址会更好。

npm install -g cnpm --registry=https://registry.npm.taobao.org

• 安装angular/cli失败的方法

npm uninstall -g @angular/cli  //卸载angular/cli /

npm cache clean  //清除缓存

cnpm install -g @angular/cli //重新安装

• 检测 Angular CLI 是否安装成功

ng -v  //查看版本能否正常显示

---

三.创建项目

先到cmd里进入项目所在的目录，用cd命令进入。

• 新建项目名

ng new angular01  //

• 进入所建目录启动服务

cd angular01

cnpm install     //安装依赖 

ng serve --open  //启动服务

---

四.项目的基本目录结构

.
├── README.md
├── e2e
│ ├── app.e2e-spec.ts
│ ├── app.po.ts
│ └── tsconfig.e2e.json
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── src //主目录
│ ├── app
│ │ ├── app.component.css
│ │ ├── app.component.html
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts //组件
│ │ └── app.module.ts //根模块
│ ├── assets
│ ├── environments
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── favicon.ico
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.css
│ ├── test.ts
│ ├── tsconfig.app.json
│ ├── tsconfig.spec.json
│ └── typings.d.ts
├── tsconfig.json
└── tslint.json

---

五.补充命令

Angualr CLI提供了许多常用命令供我们选择：

ng generate class my-new-class              // 新建 classng generate component my-new-component      // 新建组件ng generate directive my-new-directive      // 新建指令ng generate enum my-new-enum                // 新建枚举ng generate module my-new-module            // 新建模块ng generate pipe my-new-pipe                // 新建管道ng generate service my-new-service          // 新建服务

ng g cl my-new-class        // 新建 classng g c my-new-component     // 新建组件ng g d my-new-directive     // 新建指令ng g e my-new-enum          // 新建枚举ng g m my-new-module        // 新建模块ng g p my-new-pipe          // 新建管道ng g s my-new-service       // 新建服务

---

官方文档 ：https://github.com/angular/angular-cli