title: Uncaught Error: [$injector:modulerr] Angular, Angular-ui-router with Webpack
body: <p>I've been having this problem for awhile, but I can't seem to crack it.  I'm using angular 1.5, angular-ui-router 0.2.18 (from bower components) with webpack 1.13.1 and I provided the code on the bottom. I'm getting the error messages with a <a href="https://docs.angularjs.org/error/$injector/modulerr?p0=flyHawaii&amp;p1=Error:%20%5B$injector:nomod%5D%20http:%2F%2Ferrors.angularjs.org%2F1.5.0%2F$injector%2Fnomod%3Fp0%3DflyHawaii%0A%20%20%20%20at%20Error%20(native)%0A%20%20%20%20at%20http:%2F%2Flocalhost:3000%2Fapp%2Fapp.min.js:61:417%0A%20%20%20%20at%20http:%2F%2Flocalhost:3000%2Fapp%2Fapp.min.js:80:137%0A%20%20%20%20at%20b%20(http:%2F%2Flocalhost:3000%2Fapp%2Fapp.min.js:79:189)%0A%20%20%20%20at%20http:%2F%2Flocalhost:3000%2Fapp%2Fapp.min.js:79:432%0A%20%20%20%20at%20http:%2F%2Flocalhost:3000%2Fapp%2Fapp.min.js:94:288%0A%20%20%20%20at%20n%20(http:%2F%2Flocalhost:3000%2Fapp%2Fapp.min.js:62:356)%0A%20%20%20%20at%20g%20(http:%2F%2Flocalhost:3000%2Fapp%2Fapp.min.js:94:136)%0A%20%20%20%20at%20fb%20(http:%2F%2Flocalhost:3000%2Fapp%2Fapp.min.js:98:165)%0A%20%20%20%20at%20c%20(http:%2F%2Flocalhost:3000%2Fapp%2Fapp.min.js:75:450" rel="nofollow">Link 1</a> that directs me to angular's website saying this error happens when a module fails to load due to some exception and saying to use ngRoute (but I'm not using ngRoute) and on top of that it shows another <a href="https://docs.angularjs.org/error/$injector/nomod?p0=flyHawaii" rel="nofollow">Link 2</a> saying my module is not available.  So I'm not sure if its angular or angular-ui-router causing this. </p>
  
  <p>webpack.config.js</p>
  
  <pre><code>var webpack = require('webpack');
  var debug = process.env.NODE_ENV !== "production";
  var bower_dir = __dirname + '/public//bower_components';
  module.exports = {
      context: __dirname + '/public/app/',
      entry: {
          app: './app.js',
          vendor: ['angular']
      },
      output: {
          path: __dirname + '/public/app',
          filename: 'app.min.js'
      },
      plugins: debug ? [] : [
          new webpack.optimize.DedupePlugin(),
          new webpack.optimize.OccurenceOrderPlugin(),
          new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap:  false })
      ],
      resolve: {
          alias: {
              'jquery': bower_dir + '/jquery/dist/jquery.js',
              'angular': bower_dir + '/angular/angular.min.js'
          }
      }
  };
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>require("../bower_components/jquery/dist/jquery.min.js");
  require("../bower_components/bootstrap/dist/js/bootstrap.min.js");
  require("../bower_components/slick-carousel/slick/slick.min.js");
  var ui_router = require("../bower_components/angular-ui-              router/release/angular-ui-router.js");
  require("../bower_components/angular/angular.min.js");
  var app = angular.module("flyHawaii", [ui_router]);
  app.config(function($stateProvider, $urlRouterProvider){
      $stateProvider.state("landing", {
          url: "/",
          templateUrl: "../templates/_landing.html",
          controller: "mainCtrl"
      });
      $urlRouterProvider.other("/");
  });
  app.controller("myCtrl", function($scope){
      $scope = "fooBar";
  });
  </code></pre>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" ng-app="flyHawaii"&gt;
  &lt;head&gt;
      &lt;title&gt;flyhawaii&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;/head&gt;
  &lt;body ng-controller="mainCtrl"&gt;
      &lt;div ui-view&gt;&lt;/div&gt;
      &lt;script src="app/app.min.js"&gt;&lt;/script&gt;
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong><em>UPDATE</em></strong></p>
  
  <p>navbar.html is a template which leads to a component for _landing.html:</p>
  
  <pre><code>&lt;div class="navbar-header"&gt;
      &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;h1&gt;&lt;a class="navbar-brand" href="#"&gt;&lt;/a&gt;{{message}}&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>_landing.html:</p>
  
  <pre><code>&lt;navbar&gt;&lt;/navbar&gt;
  </code></pre>