NPM 模块的 TemplateCache 未加载（AngularJS 1.X 和 Webpack）

Question

我使用带有 webpack 的 fountain-angular yeoman 生成器创建了一个 angular 1.x 项目，用于模块管理。

然后我将angular-strap 添加为该项目的依赖项。

现在，当我尝试在我的应用程序中使用选项卡或选择等 angular-strap 插件时，无法加载这些组件的相应模板。得到以下控制台错误。

错误：[$compile:tpload] 加载模板失败：tab/tab.tpl.html（HTTP 状态：未定义未定义）

我不确定是否必须更改 webpack 配置文件中的任何内容才能正常加载这些模板。下面是我现在的配置。

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

下面是我的 index.js 文件。

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

下面是我的 header.html，我正在添加下面使用 angular-strap 中的 bs-tabs 的模板。

<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>

我相信我遗漏了一些非常直接和简单的东西。我对 webpack 很陌生，任何帮助都将不胜感激。

Answer 1

您只导入了 import 'angular-strap'; 但仍需要包含 angular-strap.tpl.min.js http://mgcrea.github.io/angular-strap/

同时导入“angular-strap.tpl.js”