http://www.ruanyifeng.com/blog/2016/01/npm-install.html

NiceFish是一个系列教学项目，都是Angular这个技术栈。

NiceFish：美人鱼，这是一个微型Blog系统，前端基于Angular 4.x + PrimeNG。http://git.oschina.net/mumu-osc/NiceFish/
NiceFish-Admin：这是系统管理界面，基于Angular 4.x+PrimeNG，http://git.oschina.net/mumu-osc/NiceFish-Admin
NiceFish-ionic：这是一个移动端的demo，基于ionic。http://git.oschina.net/mumu-osc/nicefish-ionic
NiceFish-SpringMybatis：这是Java版后台服务，http://git.oschina.net/mumu-osc/NiceFish-SpringMybatis
NiceBlogElectron：https://github.com/damoqiongqiu/NiceBlogElectron ,这是一个基于Electron的桌面端项目，把NiceFish用Electron打包成了一个桌面端运行的程序。这是由ZTE中兴通讯的前端道友提供的，我fork了一个，有几个node模块的版本号老要改，如果您正在研究如何利用Electron开发桌面端应用，请参考这个项目。
OpenWMS：https://gitee.com/mumu-osc/OpenWMS-Frontend ，这是OpenWMS项目的前端代码，基于当前最新的Angular 5.2.0和PrimeNG 4.1.0。

在线演示

NiceFish: http://47.104.13.149:4200

NiceFish-Admin: http://47.104.13.149:8080

OpenWMS：http://47.104.80.251:4200

（比较穷，买了一个阿里云小主机，您担待。）

用法

用git克隆本项目，从命令行进入进入项目根目录，依次执行以下命令：

npm i -g cnpm --registry=https://registry.npm.taobao.org
cnpm i -g @angular/cli
cnpm install
ng serve

如果之前装过@angular/cli需要先卸载：npm uninstall -g @angular/cli
如果之前装过angular-cli需要先卸载：npm uninstall -g angular-cli
如果你之前已经尝试安装过node模块，请把NiceFish根目录下的node_moduels目录删掉

然后依次执行以下命令：

npm cache clean
npm prune
npm i -g cnpm --registry=https://registry.npm.taobao.org
cnpm i -g @angular/cli
cnpm install
ng serve

打开你的浏览器，访问http://localhost:4200/

如果你想让加载的包更小，请使用以下方式启动@angular/cli内置的轻量级http server

ng serve --prod

如果你需要把项目发布到其它类型的Server上，例如Tomcat，需要对Server进行一些简单的配置才能支持HTML5下的PushState路由模式，请从以下链接里面查找对应的配置方式：https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions ，在 How to: Configure your server to work with html5Mode这个小节里面把常见的WEB容器的配置方式都列举出来了，包括：IIS、Apache、nginx、NodeJS、Tomcat全部都有，你过去抄过来就行。

【注意】如果你发现ng serve起不来，或者起来有报错，请把NiceFish根目录下的node_modules目录删掉，然后重新执行cnpm install，全局的@angular/cli也需要删掉重装。

如何更新NiceFish的代码

打开命令行，进入NiceFish根目录，依次执行以下命令：

git pull
cnpm update
ng serve

噢对，如果你pull代码之后发现起不来了，请把你项目下的node_modules全部删掉，然后重新cnpm update。这里确实有点坑，但是我也不知道为什么，目测是npm包的版本问题。

TreeShaking

开发状态打出来的bundle体积比较大，在发布到生产环境之前需要进行TreeShaking，用法如下：

打开命令行，进入NiceFish根目录，执行以下命令：

ng build --prod

加上prod参数之后，@angular/cli会利用envionments/envionments.prod.js里面的配置项来构建项目，同时会自动启用TreeShaking（摇树）特性，简而言之，就是把用不到的包全部剔除掉，就像从树上把枯叶子摇下来一样，很形象吧？

@angular/cli会在项目根目录下生成一个dist目录，里面就是编译、压缩好的文件了。仔细观察你会发现，这些文件的体积已经被大幅度压缩，加上gzip之后有一些文件只剩下1/4左右的大小。

在线交流QQ群

如果您有Angular相关的问题需要讨论，或者单纯想跟我Say Hello，请加上面几个扣扣群。注意，我每天都会收到大量的求助消息，真的有点忙，所以请您优先在扣扣群里面讨论问题。

学习资源和视频教程

大漠演讲中的所有PPT已经本项目对应的资料都在这里，您可以随意使用，https://gitee.com/mumu-osc/NiceFish/attach_files 。

如果您需要教程，请自己来这里查看，http://www.ngfans.net/ ，有视频也有文字，有免费版本也有收费版，您自己看着选。

全局路径C:\Users\wan\AppData\Roaming\npm

怎样把项目中的angular-cli升级到最新版？

方法一为了更新系统中全局安装的angular-cli软件包，您需要运行

npm uninstall -g angular-cli
npm cache clean
npm install -g @angular/cli@latest

方法二为了更新系统中全局安装的angular-cli软件包，您需要运行

rm -rf node_modules
npm uninstall --save-dev angular-cli
cnpm install --save-dev @angular/cli@latest
cnpm install



npm update angular-cli -g

Angular入门之环境搭建（VS code）

 
  https://blog.csdn.net/maiowu1001/article/details/76600558

环境Win 64 node:6.11.1 npm:3.10.10 Typescript:2.4.2 VS code:1.14.0
安装步骤安装Node.js 在Node.js官网下载合适的版本，然后按照提示的步骤安装即可, 不必再去安装npm,安装Node.js时,会自动安装npm 简单的说，Node.js就是一个服务器端的JavaScript环境。NPM是随同Node.js一起安装的包管理工具，能解决Node.js代码部署上的很多问题。二者的详细介绍可参考Node.js和NPM教程
安装Typescript 打开终端或cmd，执行如下命令： npm install -g typescript
安装Angular-cli 执行如下命令： npm install -g @angular/cli angular-cli它是angular框架官方的一个构建工具，核心是webpack，以及npm做为依赖包 这个安装过程中可能遇到些奇怪的问题，注意事项及解决办法见文末
检查版本号 通过检查版本号，来测试是否安装成功，执行以下命令： npm -v 检查npm版本号 tsc -v检查typescript版本号 ng -v检查Angular版本号
安装Visual Studio Code VS code和我们常用的VS压根不是一回事，它只是一个开源的轻量级编辑器，而不是IDE，因为支持typescript语法，且插件功能丰富，所以选择 官网下载正常安装即可，接下来安装几个功能强大的插件： Debugger for Chrome: 必需插件！！用来调试的，后边调试环节详细介绍 Angular 2,4 and upcoming latest TypeScript HTML Snippets: 支持Angular2.0+的特性及语法 Path Intellisense: 自动路径补全 npm Intellisense: 支持在代码中导入npm模块（require方法）时的自动补全 Auto Close Tag: 输入开始标签后，自动添加结束标签 Auto Rename Tag: 修改html标签时，自动帮你完成尾部闭合标签的同步修改 HTML Snippets：提供对HTML语言的支持 HTML CSS Support：让 html 标签上写class 智能提示当前项目所支持的样式 Bracket Pair Colorizer:给括号加上不同的颜色，便于匹配 vscode-icons：给各种文件都加上图标 TSLint：TS语法检测 beautify : 可以格式化JSON|JS|HTML|CSS|SCSS,比内置格式化好用 emoji:可以在代码中加表情，改善心情~
创建项目 ng new my-angular2-app 注意这里文件名不可以包含下划线
启动项目 进入刚刚创建的项目目录，即./my-angular2-app 执行命令：ng serve
调试 ng serve要先行启动,调试是调试，不包括引导angular-cli的启动 点击Debug按钮，然后启动，首次会弹出调试配置，选择“Chrome”，这时正确情况下就会弹出一个新的Chrome页面； VS code里可以直接打断点，查看调试中的数据信息； 调试时发现错误，可以直接在VS code中修改代码，保存后由于 Angular-cli 自动刷新，所以可以直接在chrome页面看到修改后的页面
当然熟悉Chrome调试的，也可以直接用chrome的开发者工具
====本地=========== 
  ng generate class my-new-class // 新建 class

 
  ng generate component my 
  -new 
  -component 
    
  // 新建组件

 
  ng generate directive my 
  -new 
  -directive 
    
  // 新建指令

 
  ng generate enum my 
  -new 
  -enum 
    
  // 新建枚举

 
  ng generate module my 
  -new 
  -module 
    
  // 新建模块

 
  ng generate pipe my 
  -new 
  -pipe 
    
  // 新建管道

 
  ng generate service my 
  -new 
  -service 
    
  // 新建服务

====全局========

ng g cl my -new -class // 新建 class

ng g c my -new -component // 新建组件

ng g d my -new -directive // 新建指令

ng g e my -new -enum // 新建枚举

ng g m my -new -module // 新建模块

ng g p my -new -pipe // 新建管道

ng g s my -new -service // 新建服务

angular-cli安装注意事项

此处为参考一位大神的文章，可是找不到链接了，不能挂参考链接了，如果有找的到的，麻烦告诉下我，谢谢 angular-cli的核心是webpack，以及npm做为依赖包。但往往在安装过程中会遇到很多奇怪问题，我把这一切都追根于网络问题。相信很多利用npm解决依赖包的人都知道淘宝有良心产品 cnpm，但这一次cnpm在安装angular依赖包时可能会行不通。那么一个正确的安装依赖包的姿势应该是： 1、Windows下必须是【管理员模式】下运行CMD；再使用 ng 命令。 2、当 ng new xx 创建项目时会自动执行 npm install 下载依赖包。 3、如果你网络没有问题的情况下，此时 ng serve 就可以正常运行。然，很多时候，你可能会收到像：

懵逼了吧，无从下手了吧。其实是因为所依赖的.d.ts声明文件是存在rawgit里，靠腰啊，大部分网络环境是被抢！！所以类似这种问题，建议解决你的网络问题，那就是VPN。这也是前面我说cnpm也帮不了你的原因，无意黑cnpm！ UPDATE 2017-04-11 有一次我尝试以下办法完成： npm install -g nrm nrm use taobao npm install 当然如若不行，可以尝试以下： windows下使用管理员模式CMD 1、先安装全局包 npm uninstall -g @angular/cli npm cache clean npm install -g @angular/cli@latest 2、创建项目 ng new ng-article cd ng-article ng serve 3、如果ng serve运行不起来，尝试：删除node_modules npm install 4、依然错误尝试VPN，再循环第3步

升级老项目也比较简单： windows下使用管理员模式CMD

1、全局版本

npm uninstall -g @angular/cli

npm cache clean

npm install -g @angular/cli@latest

2、项目版本，先删除node_modules

cnpm install --save-dev @angular/cli@latest

cnpm install

3、最麻烦就是可能会一些配置的变更，这个只能看CHANGELOG.md。

 
  https://github.com/angular/angular-cli/wiki

Angular CLI

Overview

The Angular CLI is a tool to initialize, develop, scaffold and maintain Angular applications

Getting Started

To install the Angular CLI:

npm install -g @angular/cli

Generating and serving an Angular project via a development server Create and run a new project:

ng new my-project
cd my-project
ng serve

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Bundling

All builds make use of bundling, and using the --prod flag in ng build --prod or ng serve --prod will also make use of uglifying and tree-shaking functionality.

Running unit tests

ng test

Tests will execute after a build is executed via Karma, and it will automatically watch your files for changes. You can run tests a single time via --watch=false or --single-run.

Running end-to-end tests

ng e2e

Before running the tests make sure you are serving the app via ng serve. End-to-end tests are run via Protractor.

Additional Commands

Angular CLI Config Schema

Config Schema

Additional Information

There are several stories which will walk you through setting up additional aspects of Angular applications.

https://stackblitz.com/github/{GH_USERNAME}/{REPO_NAME}

https://stackblitz.com/github/Autodesk-Forge/forge-rcdb.nodejs

两个问题。

一是Angular Cli全局版本低于项目版本，这个警告可以忽略它，或者升级。

二是，关于 ELOOP: too many symbolic links encountered 的错误，我想应该是 cnpm 引起的，建立使用：

cnpm install --by=npm

或，直接：

npm install

https://www.imooc.com/wenda/detail/378092

Error: ELOOP: too many symbolic links encountered,

npm install -g typescript typings 因为angular-cli是用typescript写的，所以要先装这两个：