組件裡的 URLs

絕對路徑

組件常常會要使用外部模板跟風格的檔案，我們在 templateUrl 和 styleUrls 特性中用 URL 定義這些檔案，就像這樣：

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

預設中，我們必須填上絕對路徑的 URL，也就是完整路徑，但是這樣很麻煩，檔案規模變很大時，你大概也記不起來完整路徑。那有沒有更好的方法？

組件相對路徑 (Component-Relative Path)

當然有。我們可以只要輸入和組件同一層的相對路徑 (Component-Relative Path)。
首先我們要把應用程式建立成 commonjs 形式的 modules 並且用 systemjs or webpack 這類的 package loader 載入就好。

Angular CLI 或 Angular SEED 這類的套件已經將這個技術設為預設。

好，所以現在我有個專案長這樣。裡面有個 APP 資料夾，包含了幾個檔案。如果要採用新方法的話應該要這樣：

app
├ some.component.css
├ some.component.html
└ some.component.ts
...

一個組件的兄弟姊妹包含模板 (template) 跟風格 (style)，應該要永遠在一起。
命名規則則是 xxx.component 加上 .html、.css 或 .ts。

設定 moduleId

依照結構慣例，就是兄弟姊妹不可分離的情況，我們可以輕易地找到模板跟風格的檔案，只要我們在 @Component 的 metadata 中加入moduleId 特性。

moduleId: module.id,

現在我們只要放相對路徑就好

@Component({
  moduleId: module.id,
  templateUrl: 'some.component.html',
  styleUrls:  ['some.component.css']
})

這樣 Angular 就知道自己去找兄弟姊妹，所以不用設定絕對路徑。
但記住，前提是都放在同一層資料夾中，且命名法一樣。

可以看看 Plunker 的效果。

原理

Angular 只知道絕對路徑，而 index.html 的地方為 root，所以先前我們都需要在檔名前面加上 app/，但是如果我們採用 commonjs 的形式，並且加上 moduleId，Angular 就會先找到組件的絕對位置，然後在把其他檔案冠上組件的絕對位置，所以我們才只需要輸入與組件相關的相對路徑。