angular templateurl not found via webapack in production
<p>I have a angular 1.5 app component in typescript. I am using webpack as build tool. I have following component- </p>

<pre><code>import {Component} from "../../common/decorators"

const app = angular.module('app');
 @Component(app, {
  selector: 'navComponent',
  controllerAs: 'ctrl',
  styleUrls: './nav.style.scss',
  templateUrl: './nav.template.html'
 })
 class navComponent {
 static $inject = ['$scope', '$attrs', '$element'];

 constructor(private $element, $scope: ng.IScope, $attrs) { 

 }   
}
</code></pre>

<p>and the decorator is</p>

<pre><code>export const Component = function(module: ng.IModule, options: {
  selector:string,
  controllerAs?: string,
  styleUrls?: string,
  template?: string,
  templateUrl?: string
}) {
  return (controller: Function) =&gt; {
   module.component(options.selector, angular.extend(options, {   controller: controller }));
 }
}
</code></pre>

<p>It works fine in local machine but after doing webpack build, it doesnt work in production with bundle.js </p>

<p>Here is the loader i am using. </p>

<pre><code>loaders: [
        {
            test: /\.html$/,
            loader: 'html-loader',
        }
</code></pre>

<p>Here is the error message: </p>

<p>Error: [$compile:tpload] Failed to load template: /components/nav/nav.template.html (HTTP status: 404 Not Found)</p>