angular4环境搭建及配置

一。环境搭建准备及项目创建

1.安装node.js 安装后使用npm -v指令查看版本并确定是否安装成功

2.npm install -g @angular/cli  安装angular-cli

3.ng -v 查看版本并看是否安装成功

4.ng new tp 创建一个新的angular项目tp为项目文件名

二。安装引用库

1.把用到的库安装到本地（成功后可以在package.json文件中看到）

例如安装jq：npm install jquery --save

2.把用到的库引用到项目中去： 配置angular-cli.json中的“style”和“script”

例如："styles": [

  "styles.css"],"scripts": [  "../node_modules/jquery/dist/jquery.js",  "assets/lib/laydate/laydate.dev.js",  "assets/lib/audioplayer/MyPlayer.js"]

三。angular4安装类型描述文件（.ts不支持jq与bootstrap，使其认识）

例如安装jq类型描述文件：npm install @types/jquery --save-dev

例如安装bootstrap类型描述文件：npm install @types/jquery --save-dev

四。angular组件生成

使用 ng g component seOut (注意：seOut为组件名)

五。项目中生成服务命令

使用 ng g service shared/seOut (注意：seOut为服务名)

六。单独服务配置

1.创建一个空文件夹名为：service

2.用编辑器打开使用  npm init -y指令初始化文件  生成一个配置文件

3. 引入node的类型定义文件使用 npm i @types/node --seve 

4.node不认识ts 创建一个类型编译文件tsconfig.json使ts编译成Javascript 

文件内容：{
  "compilerOptions": {    "target": "es5",    "module": "commonjs",    "emitDecoratorMetadata": true,    "experimentalDecorators": true,    "outDir": "build",    "lib": ["es6"]  },  "exclude": [    "node_modules"  ]}
5.配置开发工具使其用自定义的编译文件tsconfig.json     我这里用的是webStorm ,  Files->setting->languages $ Frameworks ->TypeScript->Enable TypeScript compiler将其勾选并勾选我们自己定义的文件6.减少编码，减少开发 安装express框架   并安装类型定义文件 npm install @types/express --save7.安装 nodemon 使用指令  npm install -g nodemon ,实时监控源代码启动服务8.使用nodemon  build/seOut.js启动服务