希格工作室

2016年9月21日 星期三

angular2 安裝 with Visual Studio 2015

https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html
https://angular.io/docs/ts/latest/quickstart.html

1.確認是否安裝最新版node.js和npm
2.在cmd輸入node -v及npm -v,如果出現不名的指令代表未曾安裝過
  2.1下載node.js -> https://nodejs.org/en/
  2.2安裝完node.js後更新npm->至cmd輸入 npm install npm -g
3.修改visual studio的外部工具路徑
  3.1工具->選項->專案和方案->外部Web工具->將$(PATH)移至第二順位(在.\node_modules\.bin下)->確定後重啟visual studio

4.VS安裝最新版TypeScript->工具->擴充功能和更新->線上->查"TypeScript"->找最新(最多人下載)的裝

5.下載QuickStart範例,建立WEB應用程式,將QuickStart COPY到專案根目錄然後加入專案

6.右鍵package.json->還原封裝->等3~10分鐘(注意輸出視窗說結束為止,都不要亂動VS)

7.不要理任何輸出視窗寫的錯誤訊息

8.到tsconfig.json加上"compileOnSave": true

9.F5編譯

10.app資料夾的ts檔會產生js檔,再把產生的js檔加入專案

Done.

--------------------------
關於index.html
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>

shim.min.js 即使不載入 ng2也可以運作

zone.js Reflect.js Reflect.js這三者則有相依性 要按順續載入,systemjs.config.js才能運作

最後 System.import('app').catch(function(err){ console.error(err); });才能順利init


--------------------------
關於運行

在順利Init NG2後,app資料夾中的js關係為
從main.js為主入口,載入需要的模組塊(app.module),由各模組內設定需要的服務端口元件(app.component),最後才由元件設計/生成結果

main.js -> app.module -> app.component -> {htmlTemplate} -> Ng2 Objects -> Active UI -> release to User


--------------------------
發行

*.因node_modules會要求不要加入VS專案內,所以發行時不會連帶輸出,因此線上會缺少node_modules,故有兩種作法
  1.在主機上也安裝NPM然後自行下npm install (如果有問題 改下npm install --no-optional)
  2.土法練鋼的將自己專案的node_modules COPY上去(幾萬個檔案慢慢等吧)