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

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