1. Angular开发环境搭建

·  阅读 234

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的项目。