tricks.md

Angular 開發小技巧

@angular/cli

export interface

需要注意的是，因為JS本身並沒有interface的概念，因此就算TS定義並匯出interface，編譯後的檔案是不會產生任何程式碼的。這也導致有時時候會發生編輯匯入匯出interface後程式編譯失敗。這時只需要ctrl + c停止然後npm start / yarn start重新啟動編譯即可。

ng serve 無法用 IP 連線

angular/cli 為了某些考量，在預設的情況並不允許透過 IP 的方式連線至 ng serve 所啟動的伺服器。在某些情況下，要稍微妥協一下的作法是幫 ng serve 加上 --host 選項。

{
  "scripts": {
    "dev": "ng serve --host 0.0.0.0"
  }
}

注意：上述的 0.0.0.0 請填入電腦的 IP。

來源：angular/angular-cli#2542

debugging

• Chrome Debugging with Angular CLI

Component

動態產生 Component

• Dynamic component loading with Angular2: replace $compile
• 用一般的 innerHTML 注入 raw HTML，再用事件回呼的方式攔截點選連結事件。

Route

title service

• 如何實作動態網頁標題 - Dynamic page titles in Angular 2 with router events