1. Angular开发环境搭建

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 install
ng serve
复制代码

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

启动完成之后，打来浏览器访问：http://localhost:4200/

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

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

转载于:https://juejin.im/post/5bc3e6d3e51d450e5f3db7ac