angularjs module not loading for me

Question

I am stuck on trying to get rid of the following error:

Error: $injector:modulerr Module Error Failed to instantiate module ptoApp due to: Error: [$injector:unpr]

Here is my app.js code:

angular.module('ptoApp', ['ui.router','ngResource'])
    .config(function($stateProvider, $urlRouterProvider) {
    $stateProvider

    // route for the home page
    .state('app', {
        url:'dist',
        views: {
            'header': {
                templateUrl : 'views/header.html'
            }
        }
    });
    $urlRouterProvider.otherwise('/');
});

Here is my html body:

<body>
        <div id="container">
            <div class="header" ui-view="header"></div>
            <div class="info" ui-view="info"></div>
            <div class="body" ui-view="body"></div>
            <div class="secondBody" ui-view="secondBody"></div>
        </div>
        <!-- build:js scripts/main.js -->
        <script src="../bower_components/jquery/dist/jquery.min.js"></script>
        <script src="../bower_components/angular/angular.min.js"></script>
    <script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
    <script src="../bower_components/angular-ui/build/angular-ui.js"></script>
    <script src="../bower_components/angular-resource/angular-resource.min.js"></script>
        <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <script src="js/app.min.js"></script>
        <!-- endbuild -->
    </body>

I keep getting the following error, but all of my js files to bower seem to be loading. I am not sure if I am missing something I should be loading. I am also using browser-sync and I am not sure if that is throwing something off too. All of the js files seem to be loading into the index.html file fine.

Don't load the minified version (angular.min.js), instead load angular.js and you'll be able to see more detailed error — Alon Eitan
– Alon Eitan, Commented Jan 26, 2017 at 20:26
Now it is saying Error: $injector:unpr Unknown Provider Unknown provider: e This error results from the $injector being unable to resolve a required dependency. To fix this, make sure the dependency is defined and spelled correctly — Todd Coulson
– Todd Coulson, Commented Jan 26, 2017 at 20:40
no 404, but I am getting 304 not modified statuses for my js files. — Todd Coulson
– Todd Coulson, Commented Jan 26, 2017 at 20:48

Claies · Accepted Answer · 2017-01-26 20:52:43Z

1

You have minified your app.min.js, but the original app.js is not minification safe.

Your .config line is injecting dependencies, but does not have a static method for locating those dependencies. when minified, .config(function($stateProvider, $urlRouterProvider) { will be turned into something similar to .config(function(e, f) {, and the original identity of the dependencies is lost.

There are two ways to resolve this issue, according to the angular documentation:

1) Provide an inline array of the string names of the dependencies to be referenced.

.config(['$stateProvider', '$urlRouterProvider', 
        function($stateProvider, $urlRouterProvider) {...}])

2) Use the $inject property.

var configFunction = function($stateProvider, $urlRouterProvider){...};
configFunction.$inject = ['$stateProvider','$urlRouterProvider'];

angular.module('ptoApp', ['ui.router','ngResource'])
.config(configFunction);

The choice of which to use is mostly a matter of preference and coding style; The inline method is much more commonly used in most examples.

answered Jan 26, 2017 at 20:52

Claies

22.4k4 gold badges56 silver badges81 bronze badges

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

4 Comments

Todd Coulson Over a year ago

ah that makes a lot of sense. Thanks. I will go down this path.

Todd Coulson Over a year ago

yeah, that fixed all the run time errors, now I am not getting my ui-view to load.

Claies Over a year ago

if I had to guess, that is because you only have one route on the dist path, but you probably aren't trying to load http://yoursite.com/dist

Todd Coulson Over a year ago

Got my views to load, yay, all set. Thanks.

Collectives™ on Stack Overflow

angularjs module not loading for me

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related