I have a TypeScript component for an Angular 1.5 app using webpack as the build tool. The component code is as follows:
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) {
}
}
And this is the decorator used:
export const Component = function(module: ng.IModule, options: {
selector:string,
controllerAs?: string,
styleUrls?: string,
template?: string,
templateUrl?: string
}) {
return (controller: Function) => {
module.component(options.selector, angular.extend(options, { controller: controller }));
}
}
Everything works fine locally, but after building with webpack, it fails to work in production with the bundled JavaScript file.
This is the loader configuration being used:
loaders: [
{
test: /\.html$/,
loader: 'html-loader',
}
Here's the error message encountered:
Error: [$compile:tpload] Failed to load template: /components/nav/nav.template.html (HTTP status: 404 Not Found)