2
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Angular 4でmoduleIdは要らなくなる

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のユーザーにとっては、注記くらい残してほしかったところでしょう。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
2
Help us understand the problem. What are the problem?