title: Angular unable to instantiate module when loaded using RequireJS
body: <p>There is something really weird going on when I'm using RequireJS with AngularJS. I managed to load all my angular dependencies through RequireJS. I can see those scripts downloaded when I open up the Sources pane in Chrome's developer tool. But Angular keeps throwing an error in the console that it failed to instantiate the module:</p>
  
  <pre><code>Uncaught Error: [$injector:modulerr] Failed to instantiate module MyTestApp due to:
  Error: [$injector:nomod] Module 'MyTestApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure...&lt;omitted&gt;...0)
  </code></pre>
  
  <p>It seems like Angular, when loaded with RequireJS, cannot bind with the <code>ng-app</code> tag in the HTML page. I'm not sure if this is the case but it seems like so to me because when I import angular.min.js manually into the HTML page, it all works fine. </p>
  
  <p>Did I do anything wrong when using RequireJS with Angular? How should I use the two together? Here's how my code look:</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en" ng-app="MyTestApp"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;AngularJS&lt;/title&gt;
    &lt;link rel="stylesheet" href="css/style.css"/&gt;
    &lt;script data-main="main" src="js/require.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div ng-controller="TestController"&gt;{{helloMessage}}&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>require.config({
      baseUrl: "scripts/app",
  
      shim: {
          "angular": {
              exports: "angular"
          },
          "angular.route": {
              deps: ["angular"]
          },
          "bootstrapper": {
              deps: ["angular", "angular.route"]   
          },
  
      },
  
      paths: {
          "angular": "../angular",
          "angular.route": "../angular-route",
          "bootstrapper": "bootstrapper"
      }
  });
  
  require(["angular", "angular.route", "bootstrapper"],
      (angular, ngRoute, bootstrapper) =&gt; {
          bootstrapper.start();
      }
  );
  </code></pre>
  
  <p><strong>bootstrapper.js</strong></p>
  
  <pre><code>function run() {
         app = angular.module("MyTestApp", ["ngRoute"]);
         app.controller("TestController", TestController);
         console.log(app); //Prints object to console correctly, ie, angular was loaded.
  }
  </code></pre>