angular4环境搭建及配置

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

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

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

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

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

5. npm install 安装依赖

二。安装引用库

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.在service目录下 执行npm init -y指令  生成一个package.json配置文件

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

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 express --save  并安装类型定义文件 npm install @types/express --save
7.安装 nodemon 使用指令  npm install -g nodemon ,实时监控源代码启动服务
8.使用nodemon  build/seOut.js启动服务