TemplateCache of NPM Modules not loading (AngularJS 1.X and Webpack) - angularjs

Question

I created a angular 1.x project using fountain-angular yeoman generator with webpack for module management.
I then added angular-strap as a dependency to this project.
Now when i try to use angular-strap plugins like tabs or select in my application, am not able to get the corresponding template of these components loaded. Got the below console error.
Error: [$compile:tpload] Failed to load template: tab/tab.tpl.html (HTTP status: undefined undefined)
Am not sure if i have to change anything in webpack config file to get these templates loaded fine. Below is what my config looks like now.
const webpack = require('webpack');
const conf = require('./gulp.conf');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const FailPlugin = require('webpack-fail-plugin');
const autoprefixer = require('autoprefixer');
module.exports = {
module: {
rules: [
{
test: /\.json$/,
loaders: [
'json-loader'
]
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
enforce: 'pre'
},
{
test: /\.(css|scss)$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
config: {
path: './postcss.config.js'
},
plugins: () => [require('autoprefixer')]
},
},
'sass-loader',
]
},
{
test: /\.js$/,
exclude: /node_modules/,
loaders: [
'ng-annotate-loader',
'babel-loader'
]
},
{
test: /\.html$/,
loaders: [
'html-loader'
]
}
]
},
plugins: [
new webpack.ProvidePlugin({
moment: 'moment',
agGrid: 'ag-grid'
}),
new webpack.ContextReplacementPlugin(/\.\/locale$/, 'empty-module', false, /js$/),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
FailPlugin,
new HtmlWebpackPlugin({
template: conf.path.src('index.html')
}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: () => [autoprefixer]
},
debug: true
})
],
devtool: 'source-map',
output: {
path: path.join(process.cwd(), conf.paths.tmp),
filename: 'index.js'
},
entry: `./${conf.path.src('index')}`
};
Below is my index.js file.
import angular from 'angular';
import 'angular-sanitize';
import 'angular-toastr';
import 'todomvc-app-css/index.css';
import {TodoService} from './app/todos/todos';
import {App} from './app/containers/App';
import {Header} from './app/components/Header';
import {MainSection} from './app/components/MainSection';
import {TodoTextInput} from './app/components/TodoTextInput';
import {TodoItem} from './app/components/TodoItem';
import {Footer} from './app/components/Footer';
import 'angular-ui-router';
import 'angular-strap';
import 'angular-cookies';
import '#exalink/ui-components/dist/xl.ui-components';
import routesConfig from './routes';
import * as agGrid from 'ag-grid';
import './index.scss';
agGrid.initialiseAgGridWithAngular1(angular);
angular
.module('app', ['ngSanitize', 'ngCookies', 'agGrid', 'mgcrea.ngStrap', 'ui.router', 'toastr', 'xl.uiComponents'])
.config(routesConfig)
.service('todoService', TodoService)
.component('app', App)
.component('headerComponent', Header)
.component('footerComponent', Footer)
.component('mainSection', MainSection)
.component('todoTextInput', TodoTextInput)
.component('todoItem', TodoItem);
Below is my header.html, am adding the below template that uses bs-tabs from angular-strap.
<div bs-active-pane="$ctrl.tabs.activeTab" bs-tabs>
<div ng-repeat="tab in $ctrl.tabs" data-title="{{ tab.title }}" name="{{ tab.title }}" disabled="{{ tab.disabled }}" ng-bind="tab.content" bs-pane>
</div>
</div>
I believe am missing something pretty straight forward and simple. Am pretty new to webpack and any help would be appreciated.

Answer 1

You imported only
import 'angular-strap';
but still need to include angular-strap.tpl.min.js
http://mgcrea.github.io/angular-strap/
import 'angular-strap.tpl.js' as well