AngularJS - Failed to instantiate module

Question

(Full error message below)

Causing all of my script to fail, and can't even run a simple $scope message.

JSFiddle: https://jsfiddle.net/cj5pe43k/5/.

HTML

<body ng-app="app" ng-controller="mainController">

    <div id="test" style="position:absolute;top:0;left:0;background:#000;width:100vw;height:100vh;color:#fff;display:flex;align-items:center;justify-content:center;"><p>{{message}}</p></div>

</body>

JS:

var app = angular.module('app', ['ngRoute']);

app.config(function($routeProvider) {
  $routeProvider

  .when('/', {
    templateUrl: 'index.html',
    controller: 'mainController'
  })

  .when('/', {
    templateUrl: 'pages/home.html',
    controller: 'mainController'
  })
})

app.controller('mainController', function($scope) {
  $scope.message = 'Main Controller Active';
})

Error: [$injector:modulerr] Failed to instantiate module justpayrollApp due to: [$injector:nomod] Module 'justpayrollApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

I'm not a JsFiddle guy so I put your code into a Plunker (plnkr.co/edit/rFDtZ65kKYpYhPvyuKP9?p=preview) and it works just fine. I can't see where in your fiddle that your js gets imported ... but again I'm not familiar with the inner workings of JsFiddle — jbrown

Maxwellt Maxwellt · Accepted Answer · 2017-08-21T13:06:39

First, put angular.js script above the others.

Then, put your app script into the bottom of the body element of your page.

Then, delete one of two angular-resource.js dependencies you have. Should be only one instance of a dependency.

AngularJS - Failed to instantiate module

3 Answers