Jhankar Jhankar - 2 months ago 28
AngularJS Question

angular templateurl not found via webapack in production

I have a angular 1.5 app component in typescript. I am using webpack as build tool. I have following component-

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 the decorator is

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 }));
}
}


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

Here is the loader i am using.

loaders: [
{
test: /\.html$/,
loader: 'html-loader',
}


Here is the error message:

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

Answer

You may try to embed your template:

...
template: require('./nav.template.html')
...

If you want to use separate template file you may use CopyWebpackPlugin. But you will get one extra request for every file when you deploy your app.