本文首發簡書 http://www.jianshu.com/p/9bd75adaed6f, 歡迎轉載，但請註明轉載鏈接，謝謝！

背景

Angular2正式版發佈已經一段時間了，之前用過Angular1，對其中的雙向綁定，自定義指令等印象深刻。
接觸ng2一個禮拜，這段時間參看中文官方文檔以及入門指南，對ng2有了一些瞭解，也在學習過程中遇到了一些坑。
後續把遇到的坑，羅列出來，以饗讀者。

入門參考英文官網： angular.io ,小心有牆；中文官網： angular.cn

開發環境

OS: window10

node: v6.8.0

npm: v3.10.8

git version 2.9.0.windows.1

問題 1 如何分開ts，js文件

在操作【英雄指南】過程中，隨着編寫的文件越來越多，以及編譯ts之後的有js，js.map文件，把app文件夾塞的滿滿的。所以就尋找解決方法。
卻是在stackoverflow上有人提出了，參看問題描述：
Separate Angular2 TypeScript files and JavaScript files into different folders, maybe ‘dist‘

解決

其中解決方法 2個步驟

問題2 如何讓ng2找到相關的html, css文件

針對ts編譯後生成js, js.map文件放在不同目錄下的問題解決了，但是隨着你實踐【英雄指南】發現有很多Component獨立出來的css， html模板文件。
所以，你會遇到無法找到 css，html的文件， Chrome （F12）鍵查看，提示無法在

dist/***.css html文件

很顯然，css，html是寫在app/ 因爲修改了tsconfig.json 現在js文件都是在dist目錄，沒有將css, html及時copy到dist/

解決 1 不推薦使用

使用絕對路徑，以其中的
dashboard.component.ts 爲例，其中的 @Component中的內容如下：

@Component({   
selector: 'my-dashboard',    
templateUrl: 'dashboard.component.html',    
styleUrls: ['dashboard.component.css']
})

如果您修改了問題1，那麼對應的也需要修改每個Component中所涉及的 templateUrl 以及styleUrls 中的路徑，更改爲全路徑。

@Component({   
selector: 'my-dashboard',    
templateUrl: '/app/dashboard.component.html',    
styleUrls: ['/app/dashboard.component.css']
})

針對找不到css文件，還需要在index.html中添加 css文件link。

<link rel="stylesheet" href="app/dashboard.component.css">

完成後，發現【英雄指南】可以正常運行了。

解決 2 手動拷貝css，html到dist目錄

該方法純手工操作，無毒，副作用是，你要挨個尋找，然後ctrl + C， ctrl+V

解決 3 package.json中配置

參看stack 有人提到使用

{ 
 ... 
 "scripts": {  
  "start": "npm run cleandist && npm run moveassets && tsc && concurrently \"tsc -w\" \"lite-server\" \"npm run watchassets\" ",   
 ...   
 "cleandist": "rm -rf dist/*",    
"moveassets": "rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./dist/",    "watchassets": "onchange 'app/**/*.css' 'app/**/*.html' -e 'dist/*' -v -- rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' --delete ./app/ ./dist/" 
 }, 
 ... 
 "devDependencies": {  
  ...  
  "onchange":"^3.0.2"  
}}

注意，注意，注意，這裏有坑!!!
直接衝上去，寫完然後使用window cmd 運行 npm start，立馬出現找不到 rm 命令，提示不是window內部命令，以及rsync命令找不到。

老外的估計是Linux 或者 Mac環境，所以他們可以這麼寫，但是一開始忽略的了我 window + gitBash開發環境。而且一直使用git cmd來執行 npm intall, npm start 等等

要強調本人的解決方法是在 window10 + gitBash中可以實現，在win cmd 下，一定行不通。

step1 安裝rsync

rsync可以理解爲就是同步文件，牛逼的地方是可以遠程，比如，你使用window開發，然後一旦有修改，就同步到remote服務器那邊。本身是針對linux環境，也有window平臺的壓縮包。

cwRsync_5.5.0_x86_Free.zip

zip解壓放到本地目錄， e.g. D:\Program Files\Git
配置系統path路徑
打開git bash，執行rsync是否成功？

step2 修改package.json

    ... ...
  "scripts": {
    "start": "npm run cleandist && npm run moveassets && tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "cleandist": "rm -rf dist/*",
    "moveassets": "rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' app/ dist/"
  },
    ... ...

其中，npm run cleandist 用於刪除dist/ 目錄中的所有內容
npm run moveassets 用於移動所有的html，css文件到 dist/ 目錄

git Bash執行過程，如下：

問題3 能否自動copy改動的html，css文件到dist/

本以爲完成上述的step1， step2 萬事大吉了，可惜不是的，而且這問題現在階段也沒有解決。

問題描述

開發過程中使用 list-server 的好處是自動監測有文件改動，會及時刷新瀏覽器。
但是，按照上述步驟來執行，發現，在app/ 中修改了某個html or css文件，刷新了頁面，但是沒有修改的效果。原因很簡單，沒有將改動的html or css 及時覆蓋到dist/ 目錄中，上述的json內腳本只會執行一次，

"moveassets": "rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' app/ dist/"

按照stack上的說法，再添加一個npm run xxx 命令，但是實際測試，沒有效果。

... ...

"start": "npm run cleandist && npm run moveassets && tsc && concurrently \"tsc -w\" \"lite-server\"  \"npm run watchassets\" ",

... ...

"watchassets": "onchange 'app/**/*.css' 'app/**/*.html' -e 'dist/*' -v -- rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' --delete app/ dist/"

其中的watchassets 表示，當app/ 中的css， html有改動的時候，會及時把他們rsync 到dist/ 中。

解決 1 每次修改後及時npm start

該方法不可取，npm start 到導致重新開啓一個瀏覽器頁面。但是，這個也是現在階段能想到的。

解決 2 sh腳本拷貝

使用sh腳本，非常不願意使用，這樣顯得之前的努力都白費了，之前就可以使用cp 命令直接拷貝到dist/中。
每次修改後，還得記得執行一次自己的sh腳本。

不知道，那位有更好的辦法解決這個問題？？知道的給個方向，感謝！

代碼

github

ng2英雄指南相關問題

背景