Angular 环境(MAC)搭建之VSCode

Top 1 -> 步骤
安装步骤

• 安装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

报错信息：

npm ERR! Error EACCES permission denied, mkdir 'usrlocallibnode_modulesty.png

解决办法：
sudo npm install -g typescript --unsafe-perm=true
其中 typescript便是要安装的name，取自path：xx/xx/x/typescript

• 安装Angular-cli 执行如下命令： npm install -g @angular/cli angular-cli它是angular框架官方的一个构建工具，核心是webpack，以及npm做为依赖包 这个安装过程中可能遇到些奇怪的问题，注意事项及解决办法见文末
• angular-cli安装注意事项
• 正常
  npm install -g @angular/cli
  会报错，网上搜了很多个解决办法，亲测以下方法实用
• 以管理者身份运行以下命令
• sudo npm i -g cnpm
• sudo cnpm i -g angular-cli（安装成功后ng-help有提示信息即完成）
• sudo cnpm install
• sudo ng serve
• 检查版本号 通过检查版本号，来测试是否安装成功，执行以下命令： 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的开发者工具
  Top 2 -> ng serve 报错
  报错位置 import { xx } from ‘xx’;
  错误一：导入报错,提示缺少文件，sudo npm install xxx(对应文件名)
  错误二：Error: EACCES: permission denied
  sudo ng serve 耐心等待运行即可