Angular4.x development environment and project creation (1)

The first time I came into contact with Angular4, I encountered a lot of pits when configuring the environment. Because I have not touched it in the previous version, it is basically zero exploration, and I wrote down some of my own steps and methods.

1. Install Node.js

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

• 1
• 2

• Enter at the command line: node -v and npm -v to verify the version

---

2. Install the Angular CLI scaffolding tool globally

• Install using npm command

 npm install -g @angular/cli 

• 1

• install cnpm

  There are often problems with domestic direct installation, so it is better to set it to the Taobao mirror address.

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

• 1

• Failed way to install angular/cli

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

• 1

npm cache clean  //清除缓存

• 1

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

• 1

• Check if Angular CLI is installed successfully

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

• 1

---

3. Create a project

First go to the cmd to enter the directory where the project is located, and use the cd command to enter.

• New project name

ng new angular01  //

• 1

• Enter the created directory to start the service

cd angular01

• 1

cnpm install     //安装依赖 

• 1

ng serve --open  //启动服务

• 1

---

4. The basic directory structure of the project

. 
├── 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

---

5. Supplementary commands

Angualr CLI provides many common commands for us to choose from:

ng generate class my-new-class              // 新建 class
ng 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          // 新建服务

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

ng g cl my -new -class // new class ng gc my -new -component // new component ng gd my -new -directive // ​​new directive ng ge my -new -enum // new enumeration ng gm my - new -module // new module ng gp my -new -pipe // new pipeline ng gs my -new -service // new service