Angularjs templateUrl file location not found

Question

I am locally developing a single page app.

I cannot seem to load an HTML file as a template using a simple custom directive in Angularjs. If I attempt to use raw html using the template: attribute, it works just fine but I have over 400 lines of code i need to use in this template, and as soon as I try to use templateUrl: nothing loads. I have tried like 30 possible paths including copying the HTML file to many different locations such as C:/my-customer.html in a desperate attempt, here is my project structure:

    App--
        |
        css
        |
        img
        |
        js--
           |
           main.js
           |
           foundation.js
           |
           my-customer.html
        |
        templates--
                  |
                  my-customer.html
        |
        bcf.html
        |
        fluidType.html
        |
        start.html
        |
        my-customer.html

Keeping it simple I am using the example from the angular docs here is my code for the directive (inside main.js with my controller):

app.directive('myCustomer', function() {
  return {
    templateUrl: 'my-customer.html'
  };
});

again I have tried paths like: ../my-customer.html ../templates/my-customer.html and so on but nothing is working for templateUrl:, I am on windows with no local web server running if this helps.

Here are some console errors but as a newbie not sure what they mean, I have a feeling I need to run a web server and parse through http.

 XMLHttpRequest cannot load file:///C:/Users/Dylan/Google%20Drive/PA/Dev/Grossing%20App/templates/my-customer.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
angular.js:11594 Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/Dylan/Google%20Drive/PA/Dev/Grossing%20App/templates/my-customer.html'.
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:87:261
    at m (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:83:133)
    at f (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:80:366)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:112:276
    at l.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:126:84)
    at l.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:123:195)
    at l.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:126:362)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:17:448
    at Object.e [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:37:96)angular.js:11594 (anonymous function)
angular.js:11594 Error: [$compile:tpload] http://errors.angularjs.org/1.3.8/$compile/tpload?p0=templates%2Fmy-customer.html
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:6:416
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:137:65
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:112:276
    at l.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:126:84)
    at l.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:123:195)
    at l.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:126:362)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:17:448
    at Object.e [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:37:96)
    at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:17:369)

New to Angularjs. I have hit a wall in the project and I am completely stuck now.

Similar issue here, this may help: stackoverflow.com/questions/16887018/… — lwalden
– lwalden, Commented Dec 30, 2014 at 17:47
Tried using this article before posting didn't resolve my issue unfortunately. I just added the console errors though, any help is greatly appreciated. — DylanH
– DylanH, Commented Dec 30, 2014 at 17:49
You are getting a CORS error. That means the URL of your html and the URL of your webapp are two different things. — Matthew Green
– Matthew Green, Commented Dec 30, 2014 at 17:50
Ah yes, about the CORS error: you should run angular app on some server (for example nodejs server), not statically as it will cause CORS errors — Martinsos
– Martinsos, Commented Dec 30, 2014 at 17:53
Thanks, I am copying this project to a linux box and going to finish the project there. — DylanH
– DylanH, Commented Dec 30, 2014 at 17:55

Davin Tryon · Accepted Answer · 2014-12-30 17:48:56Z

14

It should already be relative to the root. So, this should work:

app.directive('myCustomer', function() {
  return {
    templateUrl: '/templates/my-customer.html'
  };
});

If that doesn't work, first make sure you can browse your template directory:

http://localhost/templates/my-customer.html

You should be able to get the template directly. Once you find the template, then just remove the host and port.

answered Dec 30, 2014 at 17:48

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Martinsos Over a year ago

you can also remove starting / I think

Davin Tryon Over a year ago

Did you try to browse for the template directly?

DylanH Over a year ago

yea this loads file:///C:/Users/Dylan/Google%20Drive/PA/Dev/Grossing%20App/templates/my-customer.html

Davin Tryon Over a year ago

file? Are you running in a web server? You need to be running a web server.

Davin Tryon Over a year ago

Your local PC probably has a web server built in. You should investigate and run it through the server. Then, all will work as expected.

|

Collectives™ on Stack Overflow

Angularjs templateUrl file location not found

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related