TemplateCache из модулей NPM не загружается (AngularJS 1.X и Webpack) - PullRequest
Новая
       26

TemplateCache из модулей NPM не загружается (AngularJS 1.X и Webpack)

0 голосов
/ 14 мая 2018

Я создал угловой проект 1.x, используя фонтан-угловой йоменский генератор с веб-пакетом для управления модулями.

Затем я добавил 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, добавляю приведенный ниже шаблон, который использует bs-столы из углового ремня. 

<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, и любая помощь будет оценена.

1 Ответ

0 голосов
/ 15 мая 2018

Вы импортировали только import 'angular-strap'; но все равно нужно включить angular-strap.tpl.min.js http://mgcrea.github.io/angular-strap/

импорт 'angular-strap.tpl.js', а также

...