title: Angularjs and Requirejs: Error: [$injector:modulerr]
body: <p>I started using angularjs to create a single page application and wanted to add dynamic templates (views and controllers). I read on the web that I should use requirejs for doing this so I did.
  I followed this tutorial @ <a href="https://github.com/marcoslin/angularAMD" rel="nofollow">https://github.com/marcoslin/angularAMD</a> and tried to follow the steps.</p>
  
  <p>When I wanted to open the page I get those two errors on my console:</p>
  
  <blockquote>
    <p>Error: [$injector:modulerr] <a href="http://errors.angularjs.org/1.2.25/" rel="nofollow">http://errors.angularjs.org/1.2.25/</a>$injector/modulerr?p0=WebApp&amp;p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.25%2F%24injector%2Fnomod%3Fp0%3DWebApp%0AD%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A6%3A450%0AZc%2Fb.module%3C%2F%3C%2Fb%5Be%5D%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A20%3A1%0AZc%2Fb.module%3C%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A20%3A1%0Ae%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A33%3A267%0Ar%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A7%3A288%0Ae%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A33%3A207%0Agc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A36%3A309%0Afc%2Fc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A18%3A170%0Afc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A18%3A387%0AXc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A17%3A415%0A%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A214%3A469%0Aa%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A145%3A67%0A</p>
  </blockquote>
  
  <p>and this one</p>
  
  <blockquote>
    <p>Error: [$injector:modulerr] <a href="http://errors.angularjs.org/1.2.25/" rel="nofollow">http://errors.angularjs.org/1.2.25/</a>$injector/modulerr?p0=WebApp&amp;p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.25%2F%24injector%2Fmodulerr%3Fp0%3Dwebapp%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.2.25%252F%2524injector%252Fnomod%253Fp0%253Dwebapp%250AD%252F%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A6%253A450%250AZc%252Fb.module%253C%252F%253C%252Fb%255Be%255D%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A20%253A1%250AZc%252Fb.module%253C%252F%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A20%253A1%250Ae%252F%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A33%253A267%250Ar%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A7%253A288%250Ae%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A33%253A207%250Ae%252F%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A33%253A284%250Ar%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A7%253A288%250Ae%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A33%253A207%250Agc%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A36%253A309%250Afc%252Fc%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A18%253A170%250Afc%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A18%253A387%250Ac.prototype.bootstrap%252F%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252FangularAMD.min.js%253A7%253A3485%250Aa%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A145%253A67%250A%0AD%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A6%3A450%0Ae%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A34%3A97%0Ar%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A7%3A288%0Ae%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A33%3A207%0Ae%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A33%3A284%0Ar%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A7%3A288%0Ae%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A33%3A207%0Agc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A36%3A309%0Afc%2Fc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A18%3A170%0Afc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A18%3A387%0Ac.prototype.bootstrap%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2FangularAMD.min.js%3A7%3A3485%0Aa%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A145%3A67%0A</p>
  </blockquote>
  
  <p>I think they are both similar errors. I guess the error is coming from <strong>app.js</strong> file and this is my code:</p>
  
  <pre><code>define(['angularAMD'], function (angularAMD) {
  var app = angular.module("WebApp", ['webapp']);
  
  app.config(function ($routeProvider) {
      $routeProvider.when("/",
          angularAMD.route({
              templateUrl: 'app/src/home/index.html',
              controller: 'index',
              controllerUrl: 'app/src/home/'
          })
      );
  });
  
  return angularAMD.bootstrap(app);
  });
  </code></pre>
  
  <p>and <strong>main.js</strong></p>
  
  <pre><code>require.config({
  baseUrl: "app",
  
  paths: {
      'jquery' : 'libs/jquery.min',
      'general' : 'libs/general',
      'angular' : 'libs/angular.min',
      'angularAMD' : 'libs/angularAMD.min',
      'ngload' : 'libs/ngload.min'
  },
  
  shim: {
      'angularAMD' : ['angular'],
      'ngload' : ['angularAMD']
  },
  
  deps: ['app']
  });
  </code></pre>
  
  <p>and now my template files
  <strong>index.js:</strong></p>
  
  <pre><code>define(['app'], function (app) {
  app.factory('MainController', function (...) {
  
  });
  });
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;div class="appheader"&gt;
  &lt;div class="container" style="text-align:right"&gt;
      &lt;a&gt;&lt;span class="glyphicon glyphicon-refresh"&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;a&gt;&lt;span class="glyphicon glyphicon-align-justify"&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  
  
  
  
  <p>So as you can see I have those two files in <strong>app/src/home/index.(html/js)</strong>
  And other files are located at <strong>app/</strong> while <strong>./</strong> is the path of <strong>index.html (main page)</strong></p>
  
  <p>I really hope for help for my project and thanks in advance. :)</p>
  
  <p><strong><em>EDIT</em></strong> <strong><em>EDIT</em></strong> <strong><em>EDIT</em></strong> <strong><em>EDIT</em></strong> </p>
  
  <p>Here we go:
  <strong>./index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="WebApp"&gt;
  &lt;head&gt;
      &lt;title&gt;Index Index Index :)&lt;/title&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;!-- &lt;link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" /&gt; --&gt;
      &lt;meta name="viewport" content="width=100%, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /&gt;
      &lt;link rel="stylesheet" href="app/css/bootstrap.min.css" /&gt;
      &lt;link rel="stylesheet" href="app/css/yadbocss.css" /&gt;
      &lt;script data-main="app/main" src="app/libs/require.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-controller="mainController"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;div id="main"&gt;
                  &lt;div ng-view&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>./app/main.js</strong></p>
  
  <pre><code>require.config({
  baseUrl: "app/",
  
  paths: {
      'jquery' : 'libs/jquery.min',
      'general' : 'libs/general',
      'angular' : 'libs/angular',
      'angularAMD' : 'libs/angularAMD',
      'ngload' : 'libs/ngload',
      'ngRoute' : 'libs/ngRoute'
  },
  
  shim: {
      'angularAMD' : ['angular', 'ngRoute'],
      'ngRoute' : ['angular'],
      'ngload' : ['angularAMD']
  },
  
  deps: ['app']
  });
  </code></pre>
  
  <p><strong>./app/app.js</strong></p>
  
  <pre><code>define(['angularAMD'], function (angularAMD) {
  var app = angular.module("WebApp", []);
  
  app.config(function ($routeProvider, $locationProvider) {
      $routeProvider.when("/",
          angularAMD.route({
              templateUrl: 'src/home/index.html',
              controller: 'index',
              controllerUrl: 'src/home/index'
          })
      );
      $locationProvider.html5Mode(true);
  });
  
  return angularAMD.bootstrap(app);
  });
  </code></pre>
  
  <p><strong>Error report</strong></p>
  
  <p><strong>1</strong></p>
  
  <pre><code>Error: [$injector:modulerr] Failed to instantiate module WebApp due     to:
  [$injector:nomod] Module 'WebApp' 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.
  ...
  </code></pre>
  
  <p><strong>2</strong></p>
  
  <pre><code>Error: [$injector:modulerr] Failed to instantiate module WebApp due to:
  [$injector:unpr] Unknown provider: $routeProvider
  http://errors.angularjs.org/1.5.0-rc.0/$injector/unpr?p0=%24routeProvider
  minErr/&lt;@http://localhost/pollit/app/libs/angular.js:68:12
  ...
  </code></pre>