10分钟搭建好Angular框架开发环境（idea开发工具+node.js）

1、安装module

①安装nodejs 下载地址https://nodejs.org/en/
 下载安装完成后， npm -v 查看是否安装成功，
 查看环境变量  用户变量是否多一个PATH，全局变量的Path值后是否拼接了nodejs的安装路径。

②安装typescript
 npm install -g typescript
 安装完成后，命令行敲击tsc -v 查看是否安装成功

③安装angular2-cli最新版
 npm install -g @angular/cli@latest
 安装完成后，命令行敲击ng 查看是否安装成功

=====================================可以支持angular-cli项目的环境就搭建完毕了=====================================

安装项目需要的模块 （比如安装echarts    npm install --save ng2-echarts）
npm install XXX --save              默认到package.json的dependencies中
npm install xxx@1.2.3  安装指定版本的依赖

2、卸载module
卸载module npm uninstall -g XXX(module名字)
清缓存  npm cache clean

3、怎么新建并运行一个基础的angular-cli项目

···①新建项目 
······ng new projectname  (默认是css样式，也可以新建 ng new projectname --style=scss 推荐使用scss样式) 
···②加载一些module到项目中(相当于eclipse把jar添加到构建路径)
······npm install
···③新建组件  首先在app路径下新建component文件夹 组件创建到这个文件夹下
······ng generate component XXX(组件名字) 
···④启动项目   默认4200端口
······ng serve
······（指定端口:ng serve --port XXXX)
···⑤结束项目
······ctrl+c y

=====================================执行①②④，一个基础的angular-cli项目就可以访问了=====================================

==============================================
知识点：

逻辑一般用*开头，例如*ngFor、*ngIf
事件一般写在()中间，例如(click)="function()"
属性一般写在[]中间，例如[ngClass]、[ngStyle]、[ngModel]

打包到dist文件夹
ng build      没有压缩js
ng build -prod     压缩js

创建组件 ng g component name;
创建模块 ng g module name;
=====================================================
angular4版本  如果想用echarts 
安装module与2版本不同了
需要安装：
1、npm install echarts --save
2、npm install ngx-echarts --save

使用方式：
dom上写echarts属性  再写一个[option]=“自己的echarts变量名”

已测试通过，可放心使用

===============================================================================
跑项目

起后台的服务  运行webserver
 
起前台的服务   进入项目目录 运行run

启动Nginx服务  

直接访问localhost   (Nginx做了相关的配置)

放到Nginx上进行访问 每次都要打包好部署到Nginx上进行访问  （要打开其Nginx服务器）

font-awesome  字体图标模块

IP：192.168.70.22
https://tsc.topsec.com.cn/

===================================================================================================================================================
错误信息
1.
this.engine.setProperty is not a function
    at AnimationRenderer.webpackJsonp
尝试 npm outdated
     npm update
2.
ERROR in Missing binding H:\myWork\lvlvPro\lvlvPro\node_modules\node-sass\vendor\win32-ia32-48\binding.node
Node Sass could not find a binding for your current environment: Windows 32-bit with Node.js 6.x
node版本问题
此时运行按照提示执行  npm rebuild node-sass  命令，（如若不行，则先运行npm install node-sass命令执行）
===================================================================================================================================================
运行项目 Ctrl+shift + F10
刷新运行 Ctrl+F11
==================================================================================
————————————————————————————————————父组件

@Component({
  ...
  template: '<app-autoxxx [timeup]="refreshTable.bind(this) "></app-autoxxx>',
  directives: [AutoxxxxComponent]
})
export class ParentComponent {

  public refreshTable(){
    ...
  }
}

---------------------------------------公用技术组件

@Component({...})
export class AutoxxxxComponent{
  //This will be bound to the ParentComponent.theCallback

  onInit(){
     xxxx
xxxx
x
xxx
x
xxx
      changePage()
  }

  @Input()
  public changePage: Function;

}
=============================================================================================
升级nodejs 
npm install -g n
n stable

升级npm
npm install -g npm
===============================================================================================