Help us understand the problem. What is going on with this article?

Angular 4でmoduleIdは要らなくなる

More than 1 year has passed since last update.

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした