AngularJSのcomponentが動作しません

AngularJSのcomponent機能について公式のリファレンスを見ながら確認しているのですが、動作しません。
以下のソースで誤っている点があるのでしょうか。

html
1<html>
2    <head>
3        <meta charset="UTF-8">
4        <title>コンポーネントのおためし</title>
5        <script src="app/angular.min.js"></script>
6        <script src="app/index.js"></script>
7        <script src="app/heroDetail.js"></script>
8    </head>
9    <body ng-app="heroApp">
10        <div><h1>コンポーネントのおためし</h1></div>
11        <div ng-controller="MainCtrl as ctrl">
12            <b>Hero</b><br>
13            <hero-detail hero="ctrl.hero"></hero-detail>  
14        </div>
15    </body>
16</html>

html
1<span>Name: {{$ctrl.hero.name}}</span>

js
1angular.module('heroApp', [])
2.controller('MainCtrl', function MainCtrl() {
3    this.hero = {
4      name: 'Spawn'
5    };
6});

js
1angular.module('heroApp')
2.component('heroDetail', {
3    templateUrl: '../heroDetail.html',
4    bindings: {
5      hero: '='
6    }
7});

AngularJSは公式から最新バージョンを入手し使用していますので1.5未満ということはないです。
参考にしているのは以下のURLです。
https://docs.angularjs.org/guide/component

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。解決してしまっていたらご容赦下さい。

こちらのコードは、ブラウザで直にローカルのファイルを参照している状態でしょうか？
例えば、ブラウザのアドレスバーに、file:///Users/xxx/angular/index.html という形で入力してローカルのファイルを表示させている感じです。

その場合は、ブラウザの「開発者ツール」を開いて、JavaScriptのコンソールでなにかエラーが出ていないかどうか確認してみてください。

ソースコード的にスペルミスやパスの間違いなどがなければ、他に理由があるはずです。
おそらく、テンプレートのhtmlを読み込もうとしている際に、

angular.min.js:xxx Access to XMLHttpRequest at 'file:///Users/xxx/angular/app/heroDetail.html' from origin 'null' has been blocked by CORS policy

みたいなエラーが出ているのではないでしょうか？
もしそうなら、ブラウザのセキュリティ上の制約です。
CORS（Cross-Origin Resource Sharing）というものになります。AngularJSに限らず、Ajax通信で別のファイルを読み込もうとする時は、httpプロトコル経由でないとエラーになったりします。

同じソースコードを、オンラインのplnkrやCodePenなどにあげて実行すると、多分エラーは出ないと思いますので、試してみてください。

また、こうしたブラウザの制約があるので、AngularJSに限らないことですが、ローカル開発環境でもWebサーバを立ち上げて、file:/// ではなく http:// で確認しながら開発を進めるという方法を使うのが一般的です。
（もし周知でしたら失礼いたしました...）

そうでない場合でも、JavaScriptコンソールにエラーが出ていれば、それを手掛かりにやっていくと良いと思います。

投稿2019/05/18 01:35