title: How to use angular ui-router with webpack?
body: <p>I'm just posting the relevant bits of code and hope that helps me explain the situation. </p>
  
  <p>I have webpack set up, and all the controllers and directives work separately. However, I do not understand how to use angular ui-router with webpack. I do not understand how to link the image-list.html into the templateurl in the $stateProvider. I am already importing the template in the app.js file, so I don't know why the template does not show up in localhost. The controllers for each of the templates are defined in their .js files. </p>
  
  <p>What is the right way to tell the ui-router to open image-list.html first, and once I do that, how do I go from image-list.html to  tagger.html in the same page?</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>import angular from "angular"
  import imageList from "./image-list/image-list"
  import tagger from "./image-tagger/tagger"
  import 'angular-ui-router'
  import { ImageService} from "./services/image-service"
  
  angular.module('psa',['ui.router'])
  .service("ImageService",ImageService)
  .directive("imageList",imageList)
  .directive("tagger", tagger)
  
  .config(function($stateProvider, $locationProvider){
    $stateProvider
    .state('psa',{
      url:'/',
      templateUrl: imageList
    })
    .state('psa.engines',{
      url:'engines',
      template: 'these are engines'
    });
  
  
  
  });
  </code></pre>
  
  <p><strong>image-list.html</strong></p>
  
  <pre><code>&lt;div class="image-list"&gt;
  
    &lt;div class="images-show" &gt;
      &lt;img ng-repeat="img in vm.imageListFromDatabase" ng-src="[privatesrc]"&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;base href="http://localhost:8000/" /&gt;
    &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
    &lt;div ng-app="psa" style="display:flex"&gt;
        &lt;div ui-view&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;script src="http://0.0.0.0:8080/webpack.dev.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>