angular安装

nodejs & npm

npm --save-dev 和 --save 的区别

npm install 在安装 npm 包时，有两种命令参数可以把它们的信息写入 package.json 文件，一个是npm install--save另一个是 npm install –save-dev，他们表面上的区别是--save 会把依赖包名称添加到 package.json 文件 dependencies 键下，--save-dev 则添加到 package.json 文件 devDependencies 键下，譬如：

{
 "dependencies": {
    "vue": "^2.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-latest": "^6.0.0",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "vue-loader": "^11.1.4",
    "vue-template-compiler": "^2.2.1",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0"
  }
}

不过这只是它们的表面区别。它们真正的区别是，npm自己的文档说dependencies是运行时依赖，devDependencies是开发时的依赖。即devDependencies 下列出的模块，是我们开发时用的，比如我们安装 js的压缩包gulp-uglify 时，我们采用的是 “npm install –save-dev gulp-uglify ”命令安装，因为我们在发布后用不到它，而只是在我们开发才用到它。dependencies 下的模块，则是我们发布后还需要依赖的模块，譬如像jQuery库或者Angular框架类似的，我们在开发完后后肯定还要依赖它们，否则就运行不了。

另外需要补充的是：

正常使用npm install时，会下载dependencies和devDependencies中的模块，当使用npm install –production或者注明NODE_ENV变量值为production时，只会下载dependencies中的模块。

angular/cli

$ npm install -g @angular/cli

安装指定版本

npm install -g @angular/cli@1.7.4

windows下安装node-gyp

angular4 安装

确保node版本>6.0，npm版本 >3
用node –version 和 npm –version检查它们的版本
安装angular cli，命令 npm install -g @angular/cli
–g会将在你系统执行angular全局安装，你只需要运行这个命令一次
使用ng new angular-project0name创建angular项目
进入项目目录，使用ng –v查看angular版本
运行下面命令升级angular版本到 v4

Windows下面

npm install @angular/common@next @angular/compiler@next @angular/compiler-cli@next @angular/core@next @angular/forms@next @angular/http@next @angular/platform-browser@next @angular/platform-browser-dynamic@next @angular/platform-server@next @angular/router@next @angular/animations@next --save

Linux/max下面

npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@next --save

确保typescript版本安装，命令

npm install typescript@2.2.1 --save

忽略过程中的报警，安装成功后用ng –v检查新版本，已经从2.2.4升级到4.1.0了

你也可以通过package.json文件检查angular cli的相关信息

"dependencies": {
    "@angular/animations": "^4.3.4",
    "@angular/common": "^4.3.4",
    "@angular/compiler": "^4.3.4",
    "@angular/core": "^4.3.4",
    "@angular/forms": "^4.3.4",
    "@angular/http": "^4.3.4",
    "@angular/platform-browser": "^4.3.4",
    "@angular/platform-browser-dynamic": "^4.3.4",
    "@angular/router": "^4.3.4",
     ...........................
     ...........................
    }

    "devDependencies": {
      "@angular/compiler-cli": "^4.3.4",
      "@angular/language-service": "^4.3.4",
      .............
    }

angular卸载

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

Delete the C:\Users\YOU\AppData\Roaming\npm\node_modules@angular folder.

例如：rm -rf C:\Users\bhe001\AppData\Roaming\npm\node_modules@angular

angular升级

https://update.angular.io/

v4 > v5

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

ng new ProjectName

node --version ==> 8.9.0
ng --version ==> 1.5.0

"dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
}

V5 > v6

确保nodejs版本 > 8.9
更新angular cli，包括全局和本地。并且通过下面命令将配置文件从.angular-cli.json迁移到angular.json
通过下面命令将你的angular框架更新到v6，包含正确的RxJs和TypeScript
ng update @angular/core
更新angular material
ng update @angular/material

angular安装介绍