Angular4开发环境搭建

开发工具：@angular/cli

先要下NODE.JS，设置好环境变量；

其次，因为翻不了墙，所以通过淘宝发布的地址下载：https://npm.taobao.org/ 。通过如下命令下载安装 @angular/cli：

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

cnpm i -g @angular/cli

最后，安装完毕之后，你的终端里面将会多出一个名叫 ng 的命令，敲下 ng，将会显示完整的帮助文档：

创建第一个项目：

进入工作空间，输入命令：ng serve

进入：http://localhost:4200/ 

注意事项：

• 如果你需要修改端口号，可以用 ng serve --port ****来进行指定。
• 如果你想让编译的包更小一些，可以使用 ng serve --prod，@angular/cli 会启用 TreeShaking 特性，加了参数之后编译的过程也会慢很多。所以，在正常的开发过程里面请不要加 --prod 参数。
• ng serve 是在内存里面生成项目，如果你想看到项目编译之后的产物，请运行 ng build。构建最终产品版本可以加参数，ng build --prod。

• ng 提供了很多非常好用的工具，除了可以利用 ng new 来自动创建项目骨架之外，它还可以帮助我们创建 Angular 里面所涉及到的很多模块，最常用的几个如下：

  • 自动创建组件：ng generate component MyComponent，可以简写成 ng g c MyComponent。创建组件的时候也可以带路径，比如：ng generate component mydir/MyComponent
  • 自动创建指令：ng g d MyDirective
  • 自动创建服务：ng g s MyService
  • 构建项目：ng build，如果你想构建最终的产品版本，可以用 ng build --prod

  更多的命令和参数请在终端里面敲 ng 仔细查看，尽快熟悉这些工具可以非常显著地提升你的编码效率。

• 对于国内的开发者来说，上面这些其实不是最重要的，国内开发者碰到的坑主要是由两点引起的：

  1. 第一点是网络问题：比如 node-sass 这个模块你很有可能就装不上，原因你懂的。
  2. 第二点是开发环境导致的问题：国内使用 Windows 平台的开发者比例依然巨大，而 @angular/cli 在 Windows 平台上有一些非常恶心的依赖，比如它需要依赖 python 环境、Visual Studio 环境。

  所以，如果你的开发平台是 Windows，请特别注意：

  1. 如果你知道如何给 npm 配置代理，也知道如何FQ，请首选 npm 来安装 @angular/cli。
  2. 否则，请使用 cnpm 来安装 @angular/cli，原因有三：1、cnpm 的缓存服务器在国内，你装东西的速度会快很多；2、用 cnpm 可以帮你避开某些模块装不上的问题，因为它在服务器上面做了缓存；3、cnpm 还把一些包都预编译好了缓存在服务端，不需要把源码下载到你本地去编译，所以你的机器上可以没有那一大堆麻烦的环境。
  3. 如果安装失败，请手动把 node_modules 目录删掉重试一遍，全局的 @angular/cli 也需要删掉重装，cnpm uninstall -g @angular/cli。
  4. 如果 node_modules 删不掉，爆出路径过长之类的错误，请尝试用一些文件粉碎机之类的工具强行删除。
  5. 最新版本的 @angular/cli 经常会有 bug，尤其是在 Windows 平台上面，所以请不要追新版本追太紧。如果你发现了莫名其妙的问题，请尝试降低一个主版本试试。这一点非常重要，很多初学者会非常困惑，代码什么都没改，就升级了一下环境，然后就各种编译报错。
  6. 对于 Mac 用户或者 *nix 用户，请特别注意权限问题，命令前面最好加上 sudo，保证有 root 权限。
  7. 无论你用什么开发环境，安装的过程中请仔细看 log。很多朋友没有看 log 的习惯，报错的时候直接懵掉，根本不知道发生了什么。