Why can't Angular find my template?

Question

I'm trying to do the phoneCat tutorial for angular JS, except in an MVC application. (I hear it's not a great idea to mix MVC routing and Angular routing, but I haven't gotten that far yet.) I'm on step 4, where we split our components off into their own modules. I made a folder in my app called "AngularModules" and made a folder in that called "phone-list". I then placed the phone-list.component.js and phone-list.module.js files we make in the tutorials into that folder. The next step calls for replacing the HTML string with a reference to an external file that will contain the html. but for some reason, angular can't seem to find that file. If I view the template file and press f5, I do start up and go to a view of that file (with obviously no binding done, so it shows the double curly braces and all). I'm quite certain the folder isn't the problem, because if I replace the templateURL part with a template part with a string, it will work. so here's my phone-list.component.js:

angular.module("phoneList").component("phoneList", {
    //templateURL: "http://localhost:52413/AngularModules/phone-list/phone-list.template.html",
    templateURL: "AngularModules/phone-list/phone-list.template.html",
    //template:"<ul>" + 
    //      '<li ng-repeat="phone in $ctrl.phones">' +
    //        "<span>{{phone.name}}</span>" + 
    //        "<p>{{phone.snippet}}</p>" +
    //      "</li>" + 
    //    "</ul>",
    controller: function PhoneListController() {
        this.phones = [
            {
                name: 'Nexus S',
                snipped: 'Fast just got faster with Nexus S.'
            }, {
                name: 'Motorola XOOM™ with Wi-Fi',
                snippet: 'The Next, Next Generation tablet.'
            }, {
                name: 'MOTOROLA XOOM™',
                snippet: 'The Next, Next Generation tablet.'
            }
        ];
    }
});

I'm not worried I'm not including phone-list.component.js correctly; if I use the template section (currently commented out) it works. That other URL, which points to localhost, also doesn't work. But if I click the link, I do see the page. I have tried templateURL: "~/AngularModules/phone-list/phone-list.template.html" , which also didn't work.

How can I get templateURL to work?

Answer 1

According the docs, the property name is templateUrl and not templateURL , so, your code should looks like this:

angular.module("phoneList").component("phoneList", {
    templateUrl: "AngularModules/phone-list/phone-list.template.html",

Now you probably needs to handle the template path issue, but you will be in the correct path.

Check info about components here