「Angular moduleId removed! You no longer need to write it in angular 4」では、Angular 4からはテンプレートやスタイルを外部ファイルに定めるとき、モジュールのクラスにつぎのようなmoduleIdは加えなくてよいと説明されています。
@Component({
moduleId: module.id,
})
この中身をもう少し補い、注意すべきことも加えます。
#Angular 4の「TUTORIAL」ではmoduleIdが使われていない
Angular 4の「TUTORIAL」で「Routing」の解説を読むと、たしかにmoduleIdは使われていません(「Add heroes to the dashboard」の項参照)。
@Component({
selector: 'my-dashboard',
templateUrl: './dashboard.component.html',
})
作例のコード「Angular Example - Tour of Heroes: Part 5」も、moduleIdなしで正しく動いています。
#moduleIdが省けるのはSystemJSプラグインの機能
Angular公式サイトの「Change Log」を見ると、「All mention of moduleId removed. "Component relative paths" cookbook deleted (2017-03-13)」の項で簡単に説明されています。moduleIdが要らなくなったのは、SystemJSプラグイン(systemjs-angular-loader.js)によるものです。したがって、Angular 4の仕様というわけではなく、またプラグインが環境に含まれていなければなりません(環境の設定については「Setup a local development environment」参照)。
このプラグインは、テンプレート(templateUrl)やスタイル(styleUrls)の外部ファイルをコンポーネントからの相対パスで定めれば、絶対パスに読み変えてくれます。Angular公式サイトの情報は、すべてこの設定にもとづくことになるとのことです。moduleIdは使わず、モジュールからの相対パスを与える書き方は、強く推奨されています。
We strongly encourage you to only write component-relative paths. That is the only form of URL discussed in these docs. You no longer need to write @Component({ moduleId: module.id }), nor should you.
#相対パスは'./'で始めなければならない
かつてAngular 2の「TUTORIAL」に沿った入門解説「Angular 2入門」を書いたので、試みにそのコードをAngular 4に対応させてみました。すると、moduleIdを省いてしまうと動きませんでした(厳密にはコメント//が入っているとtscの問題なのかエラーになるためコードは行ごと削除しました)。
@Component({
// moduleId: module.id, // 動かない
selector: 'my-dashboard',
templateUrl: 'dashboard.component.html'
})
Angular 4公式「TUTORIAL」の前掲コードとよくよく見比べてみると、ひとつだけ異なるところがあります。moduleIdを省くには、相対パスが'./'で始まらなければならないようです。
公式サイトのAngular 2の「TUTORIAL」には、少なくとも解説を書いたとき、パスの頭に'./'はなく直にファイル名が記載されていたと記憶します。簡単なことではあるものの、気づくのに時間がかかりました。前出「Change Log」によれば、サイトの解説からmoduleIdへの言及すべてをさっくり消したそうです。Angular 2のユーザーにとっては、注記くらい残してほしかったところでしょう。