1.初始化

首先我们需要使用npm安装angular-cli到全局环境

npm install -g @angular/cli复制代码

如果npm没有办法安装，请使用cnpm试试。

2. 创建项目

使用下面的命令创建一个实例项目，用于后面我们的演示

ng new angular-frontend复制代码

3. 项目结构

创建完成之后，项目的目录结构应该是这样的

├── README.md├── angular.json├── e2e│   ├── protractor.conf.js│   ├── src│   │   ├── app.e2e-spec.ts│   │   └── app.po.ts│   └── tsconfig.e2e.json├── node_modules├── package.json├── src│   ├── app│   │   ├── app.component.css│   │   ├── app.component.html│   │   ├── app.component.spec.ts│   │   ├── app.component.ts│   │   └── app.module.ts│   ├── assets│   ├── browserslist│   ├── environments│   │   ├── environment.prod.ts│   │   └── environment.ts│   ├── favicon.ico│   ├── index.html│   ├── karma.conf.js│   ├── main.ts│   ├── polyfills.ts│   ├── styles.css│   ├── test.ts│   ├── tsconfig.app.json│   ├── tsconfig.spec.json│   └── tslint.json├── tsconfig.json└── tslint.json复制代码

到这里，我们就初始化好一个angular的项目了。

4.启动项目

npm installng serve复制代码

如果你使用cnpm install安装依赖包，然后启动的时候，卡住在90%左右不动了，麻烦删除node_modules目录，使用yarn或者npm安装。没法使用npm？那你用yarn吧，应该没有问题。

启动完成之后，打来浏览器访问：

看到一个很大很红的angular的图标，那就恭喜你，开发环境搭建好了。

angular的开发环境蛋疼的很，如果可以的话，建议你换成react的项目。