Why can't Angular find my template?

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: "", 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?

1 Answer

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