Failed to load template in angularjs

Question

Inside angulajs 1x app I have following structure

app
- common
  - js
    - directives
      
      notifications.js
    - templates
      
      notifications.html
- security

notifications.js

(function(module) {    
    var notifications = function(notificating) {
        return {
            restrict: "AE",
            templateUrl: "templates/notifications.html",
// tried also   templateUrl: "../templates/notifications.html",
// tried also   templateUrl: "app/common/templates/notifications.html",
                link: function(scope) {
                // todo
            }
        };
    };    
    module.directive("notifications", notifications);
}(angular.module("common")));

inside firebug console I'm getting following error

angular.js:9658 XMLHttpRequest cannot load file:///G:/My%20App/app/templates/notifications.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.(anonymous function) @ angular.js:9658sendReq @ angular.js:9462serverRequest @ angular.js:9179processQueue @ angular.js:12914(anonymous function) @ angular.js:12930$eval @ angular.js:14123$digest @ angular.js:13939$apply @ angular.js:14227bootstrapApply @ angular.js:1487invoke @ angular.js:4152doBootstrap @ angular.js:1485bootstrap @ angular.js:1505angularInit @ angular.js:1399(anonymous function) @ angular.js:25579trigger @ angular.js:2742eventHandler @ angular.js:3013 angular.js:11358 Error: [$compile:tpload] Failed to load template: templates/templates.html http://errors.angularjs.org/1.3.0/$compile/tpload?p0=templates%2Ftemplates.html

You have to run this application in some server. Currently you are directly running accessing the file. You can take help of browser sync here. — Abhinav Sharma
– Abhinav Sharma, Commented Aug 31, 2018 at 5:07

Muthukannan Kanniappan · Accepted Answer · 2016-06-09 11:12:13Z

0

If the directory structure you have given is correct below should work.

templateUrl: "common/js/templates/notifications.html",

answered Jun 9, 2016 at 11:12

Muthukannan Kanniappan

2,0791 gold badge16 silver badges18 bronze badges

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

Comments

Ian G · Accepted Answer · 2016-06-09 11:16:56Z

0

You have to start the path from the index.html.

So "common/js/templates/notifications.html" should work.

answered Jun 9, 2016 at 11:16

Ian G

31 bronze badge

Collectives™ on Stack Overflow

Failed to load template in angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related