[Angular2] (2016-05-30 update) Routerに使用するHTMLのBASE要素について

いきさつ

どちらかというと、HTMLの内容ですが
Angular2の勉強してて初めて知ったので、記載しておきます。

Angular2のRouterについてはこちら
HTMLのbaseURIについてはこちら

構成

Webサーバーのdocumentrootの下にangularというディレクトリを作った場合
アプリケーションURLは下記のとおり
http://xxx.xxx.xxx.xxx/angular/index.html

そのときのindex.htmlの書き方は

index.jade

doctype html
html(lang="ja")
  head
    base(href="/angular/")
    meta(charaset="utf-8")
    meta(name="viewport" content="width=device-width,initial-scale=1")
    title Angular
  body
    my-app Loading ...
    script(src="node_modules/systemjs/dist/system.js")
    script(src="node_modules/rxjs/bundles/Rx.min.js")
    script(src="node_modules/angular2/bundles/angular2-polyfills.min.js")
    script(src="node_modules/angular2/bundles/angular2.min.js")
    script(src="node_modules/angular2/bundles/router.dev.js")
    script(src="assets/scripts/index.min.js")

index.coffee

appDir    = "assets/scripts"
bootstrap = "bootstrap"

System
  .config
    packages :
      "#{appDir}" :
        format           : "cjs"
        defaultExtension : "js"

System
  .import "#{appDir}/#{bootstrap}"

考察

いろいろ試した結果、下記のとおりでうまく動きました。

• [X] href="/angular"
• [X] href="angular"
• [O] href="/angular/"
• [O] href="/angular/index.html"

ちなみにhref="/angular/"のときは

console

$ console.log(document.baseURI)
"http://xxx.xxx.xxx.xxx/angular/"

となります。

追記（2016-05-30 update）

@2.0.0-rc.1になって、若干仕様変更したっぽいのでメモ

• [X] href="/angular"
• [X] href="angular"
• [O] href="/angular/"
• [X] href="/angular/index.html"