title: When I try to reference Angular material I am getting Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.21/$injector/modulerr?
body: <p>If I try to reference angular material I am getting the error: Uncaught Error: [$injector:modulerr] <a href="http://errors.angularjs.org/1.2.21/" rel="nofollow">http://errors.angularjs.org/1.2.21/</a>$injector/modulerr?. If i remove the reference the code is working fine, why is that?
  Thank you in advance for the help.</p>
  
  <p>This is my main layout page:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" 
            content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;@ViewBag.Title - Register&lt;/title&gt;
      @Styles.Render("~/Content/css")
      @Scripts.Render("~/bundles/modernizr")
  &lt;/head&gt;
  &lt;body data-ng-app="main"&gt;
      &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
          &lt;div class="container"&gt;
              &lt;div class="navbar-header"&gt;
                  @Html.ActionLink("Register", "Index", "Home",new { area = "" }, new { @class = "navbar-brand" })
              &lt;/div&gt;
              &lt;div class="navbar-collapse collapse"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li&gt;@Html.ActionLink("Customers", "Customer","Home")
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container body-content"&gt;
          @RenderBody()
          &lt;hr /&gt;
          &lt;footer&gt;
              &lt;p&gt;&amp;copy; @DateTime.Now.Year&lt;/p&gt;
          &lt;/footer&gt;
      &lt;/div&gt;
      @Scripts.Render("~/bundles/angular")
      @Scripts.Render("~/bundles/jquery")
      @Scripts.Render("~/bundles/bootstrap")
      &lt;script type="text/javascript"&gt;
          window.MyApp = {};
          MyApp.rootPath = '@Url.Content("~")';
      &lt;/script&gt;
      &lt;script src="~/App/Validator.js"&gt;&lt;/script&gt;
      &lt;script src="~/App/App.js"&gt;&lt;/script&gt;
      @RenderSection("scripts", required: false)
      &lt;script type="text/javascript"&gt;
          @RenderSection("jsCode", required: false)
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And this is App.js</p>
  
  <pre><code>var commonModule = angular.module('common', ['ngRoute']);
  var mainModule = angular.module('main', ['common', 'ngMaterial']);
  </code></pre>
  
  <p>BundleConfig.cs</p>
  
  <pre><code>bundles.Add(new ScriptBundle("~/bundles/angular").Include(
                    "~/Scripts/angular.js",
                    "~/Scripts/angular-route.js",
                    "~/Scripts/angular-material.js"));
  </code></pre>