Angular CLI 安装和创建项目教程-博客-网页小功能

Angular CLI 安装和创建项目教程: 原创前端  2019-03-06 09:15:37  浏览：2003

### 一、下载安装angular-cli
官方给的方法是
```javascript
npm install -g @angular/cli
```
**但是有时候会报错可以尝试以下方法**
```javascript
npm install -g @angular/cli@latest //@最新
//或
npm install -g @angular/cli@7.3.4 //@版本号
```
**如果已经安装之前版本（安装失败过也是）需要先卸载，再安装新的版本。**
```javascript
npm uninstall -g @angular/cli //卸载angular
```
> 如果还是怎么安装都不行(还是报错)，那就安装最新的node，官网目前给的说明是：`Angular 需要 Node.js 的 8.x 或 10.x 版本。`，所以安装最终的10.x版本，这是完全可以解决的。（nvm可以node多版本切换：[window下通过nvm-windows来安装多版本node](http://www.wyxgn.com/blog/detail-4.html "window下通过nvm-windows来安装多版本node")）

安装完成后可以通过`ng --version`命令查看版本

### 二、创建一个项目
##### 1、创建项目文件
```javascript
ng new my-app
```
##### 2、选择是添加路由
```javascript
? Would you like to add Angular routing? <y/N> y
```
##### 3、选择css预处理语言
```javascript
? Which stylesheet format would you like to use?<Use arrow keys> 
  CSS
> Sass <.scss>
  Less <.less>
  Stylus  <.styl>
```
> Angular CLI 会安装必要的 Angular npm 包及其它依赖。这可能要花几分钟等待。

##### 4、最后我们开始进入项目根目录，运行项目试试

```javascript
cd my-app
ng serve --open //--open（或只用 -o）选项会自动打开浏览器，并访问 http://localhost:4200/
```
![](http://www.wyxgn.com//uploads/img1/20190306/a09a9424fde198e37ca13cf65cf65601.png)

![](http://www.wyxgn.com//uploads/img1/20190306/11464bdacdb3bf113944a821765375fb.png)

上一篇：: vue部署到Nginx服务器上
下一篇：: 设置用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm