Dynamic Directive loading using AngularJS – Error: Access to restricted URI denied

All we need is an easy explanation of the problem, so here it is.

I’m currently developing a small educational project using HTML5, CSS, JS and AngularJS.

Problem: Loading of a AngularJS Directive in my index.html file

Error code [1] – Local browser

Error: Access to restricted URI denied

Some answers to this question, suggested to deploy the project on a web server. I did it and the error was very interesting:

Error code [2] – Webserver

Failed to load resource: the server responded with a status of 404 (Not Found)


File structure

app/
---- app.js
---- components/
---------- view1/
-------------- fullView.html
-------------- fullViewApp.js
-------------- partialViews/
------------------ partsOfFullView.html
------------------ morePartsOfFullView.html
assets/
---- libs/
---- css/
---- ...
---- ...
index.html

Code

index.html

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
    <meta charset="utf-8">
    <title>My Example</title>

    <!-- CSS -->
    <link href="./assets/css/bootstrap.min.css" rel="nofollow noreferrer noopener" rel="stylesheet">
    <link href="./assets/css/bootstrap-datetimepicker.min.css" rel="nofollow noreferrer noopener" rel="stylesheet">
    <!-- Libs -->
    <script src="./assets/libs/jquery-2.1.1.min.js"></script>
    <script src="./assets/libs/angular.min.js"></script>
    <script src="./assets/libs/bootstrap.min.js"></script>
    <script src="./assets/libs/moment-with-locales.js"></script>
    <script src="./assets/libs/bootstrap-datetimepicker.min.js"></script>
    <!-- App's modules -->
    <script type="text/javascript" src="./app/app.js"></script>
    <script type="text/javascript" src="./app/components/view1/fullViewApp.js"></script>
</head>
<body ng-controller="MyAppTranslationCtrl">
    <!-- my custom directive -->
    <qwe></qwe>
</body>
</html>

app.js

angular.module('MyApp', ['MyApp.View1App'])
    .controller('MyAppTranslationCtrl', function($scope) {
        console.log('-> MyApp Translation example');
    });

fullView.html

<div ng-app="MyApp.View1App" ng-controller="...">
    <div ng-controller="...">
        <!-- content, other directives, etc... -->
        ...
        ...
    </div>
</div>

fullViewApp.js

angular.module('MyApp.View1App', [])
.directive('qwe', function() {
        return {
            restrict: 'E',
            templateUrl: 'fullView.html'
        }
    });

Sorry for the long post, but I tried to make it clear, understandable and easier to find the problem.


After all I am stuck on this error and I can’t get it fixed.

I have tried to move all the files in one folder and it magically works! But when I separate them in different folders = ERROR. I can’t get it up and running!

Please assist me 🙂

############################ ANSWER

After changing the relative paths to have a full qualifier before them, as suggested in the next post, everything was fine!

Thank you!

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Assuming this is throwing the error:

angular.module('MyApp.View1App', [])
.directive('qwe', function() {
        return {
            restrict: 'E',
            templateUrl: 'fullView.html'
        }
    });

You need to use the full path.

angular.module('MyApp.View1App', [])
.directive('qwe', function() {
        return {
            restrict: 'E',
            templateUrl: 'app/components/view1/fullView.html'
        }
    });

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply