title: AngularJS Module 'agGrid' is not available! You either misspelled the module name or forgot to load it
body: <p>This is common problem and Googling shows lots of instances of it, many of them on this site.</p>
  
  <p>The answers seem to boil down to :  </p>
  
  <ul>
  <li>not injecting the module into the app</li>
  <li>for getting to include the relevant JS</li>
  <li>including things in the wrong order in <code>index.html</code></li>
  </ul>
  
  <p>I am trying to include ag-grid, following the <a href="https://www.ag-grid.com/best-angularjs-data-grid/#gsc.tab=0" rel="nofollow noreferrer">instructions for manual include</a>.</p>
  
  <p>In my <code>index.html</code>, I include  </p>
  
  <ol>
  <li>Angular</li>
  <li>ag-grid </li>
  <li>my controller</li>
  </ol>
  
  <p>I am using the <a href="https://wrapbootstrap.com/theme/inspinia-responsive-admin-theme-WB0R5L90S" rel="nofollow noreferrer">Inspinia</a> template, and the relevant code is  </p>
  
  <pre><code>(function () {
      angular.module('TapThatDashboard', 
      [
          'ui.router',                    // Routing
          'oc.lazyLoad',                  // ocLazyLoad
          'ui.bootstrap',                 // Ui Bootstrap
          'chart.js',                     // Charting
          'agGrid'
      ])
  })();
  </code></pre>
  
  <p>Note that the other stuff is working, such as the charting.</p>
  
  <p>When I remove the <code>'agGrid'</code> line, my app runs just fine (I have not yet added any grid to my HTML). When I add it in, I get </p>
  
  <blockquote>
    <p>Module 'agGrid' is not available! You either misspelled the module name or forgot to load it</p>
  </blockquote>
  
  <p>My code is far too large to post. Can anyone see what I am doing wrongly?</p>