一。環境搭建準備及專案建立

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 --save
7.安裝 nodemon 使用指令  npm install -g nodemon ,實時監控原始碼啟動服務
8.使用nodemon  build/seOut.js啟動服務