Question

我试图切换我的Angular 1.5.3应用程序，使用Webpack 3.10.0进行捆绑，并使用ngtemplate-loader使角度模板正常工作。感谢任何帮助，因为我已经坚持了很长时间。

我现在遇到的问题是在生成的html文件中包含<html></html>标记的奇怪文本：

生成的wdist / index.html：

var path = 'C:/source/kjopslosning-smb/ksmb-frontend/app/index-webpack.html';
var html = <!DOCTYPE html>
<html lang="no" class="no-js" ng-app="ksmbApp">
     <head>.....</head>
     <body>.....</body>
</html>
;
window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
module.exports = path;

项目结构

+app
+--fonts
+--images
+--styles
+--scripts
+------app.js
+------entry.js
+------controllers
+------sevices
+------directives
+--views (here are all the templates)
+--index-webpack.html
+webpack.config.js
+package.json

webpack.config.js

var webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require('path');

const extractLess = new ExtractTextPlugin({
  filename: "wbpk-bundle.css",
});


const modules = {
  rules: [
    {
      test: /\.html$/,
      exclude: /node_modules/,
      use: [

        {
          loader: 'html-loader',
          options: {
            root: path.resolve(__dirname, './app/images'),
            attrs: ['img:src', 'link:href']
          }
        },
        {
          loader: 'ngtemplate-loader?relativeTo=' + __dirname + '/app/views',
          options: {
            exclude: path.resolve(__dirname, './app/index-webpack.html'),
          }
        },
      ]
    },
    {
      test: /\.(png|svg|jpg|gif|ico)$/,
      use: [
        {
          loader: 'file-loader',
        }
      ]
    },
    {
      test: /\.less$/,
      use: extractLess.extract({
        use: [{
          loader: "css-loader"
        }, {
          loader: "less-loader",
        }],
        // use style-loader in development
        fallback: "style-loader"
      })
    },
    {
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      use: [
        'file-loader'
      ]
    }
  ]
};

module.exports = {
  entry: path.resolve(__dirname, './app/scripts/entry.js'),
  output: {
    path: __dirname + '/wdist',
    // filename: 'app.bundle.js',
    filename: '[name].bundle.js',
    publicPath: '/ksmb/app'
  },
  devtool: 'inline-source-map',
  module: modules,
  devServer: {
    port: 9000,
    contentBase: './wdist',
    openPage: 'ksmb/app',
    hot: false
  },
  plugins: [
    new CleanWebpackPlugin(['wdist']),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, './app/index-webpack.html'),
    }),
    extractLess
  ],
};

模板以两种方式注入：使用ng-include <div ng-include="require('../views/header.html')"></div>，或者像这样：

// in app.js

 $routeProvider
     .when('/about', {
      template: require('../views/about.html'),
      controller: 'AboutCtrl',
      controllerAs: 'aboutCtrl',
      title: 'Selskapsinformasjon',
      resolve: {
        initComplete: initComplete
      }
    })
});

生成的main.bundle.js似乎有srtingified模板：

.............................................
/***/ }),
/* 27 */
/***/ (function(module, exports) {

module.exports = "var path = 'C:/source/kjopslosning-smb/ksmb-frontend/app/views/about.html';\nvar html = <section class=\"ffe-section-wrapper\" mg-controller=\"AboutCtrl as aboutCtrl\">\r\n  <div class=\"ffe-content-container ffe-content-container--lg ffe-content-container--text-left\">\r\n    <a href=\"\" class=\"ffe-link-text ksmb-to-previous\" ng-click=\"aboutCtrl.back()\" ng-bind-html=\"::texts['common.back']\"></a>\r\n  </div>\r\n</section>\r\n<section>\r\n  <div class=\"ffe-content-container ffe-content-container--text-left content-wrapper\">\r\n    <h1 class=\"ffe-h2\" ng-bind-html=\"::texts['about.title']\"></h1>\r\n    <p class=\"ffe-body-paragraph\" ng-bind-html=\"::texts['about.insurance.body']\"></p>\r\n    <p class=\"ffe-body-paragraph\" ng-bind-html=\"::texts['about.damageinsurance.body']\"></p>\r\n  </div>\r\n</section>\r\n;\nwindow.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);\nmodule.exports = path;";

/***/ }),
/* 28 */
/***/ (function(module, exports) {

module.exports = "var path = 'C:/source/kjopslosning-smb/ksmb-frontend/app/views/terms.html';\nvar html = <section class=\"ffe-section-wrapper\" mg-controller=\"TermsCtrl as termsCtrl\">\r\n  <div class=\"ffe-content-container ffe-content-container--lg ffe-content-container--text-left\">\r\n    <a href=\"\" class=\"ffe-link-text ksmb-to-previous\" ng-click=\"termsCtrl.back()\" ng-bind-html=\"::texts['common.back']\"></a>\r\n  </div>\r\n</section>\r\n<section>\r\n  <div class=\"ffe-content-container ffe-content-container--text-left content-wrapper\">\r\n    <h1 class=\"ffe-h2\" ng-bind-html=\"::texts['terms.title']\"></h1>\r\n    <div ng-bind-html=\"::texts['terms.body']\"></div>\r\n  </div>\r\n</section>\r\n;\nwindow.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);\nmodule.exports = path;";

/***/ }),
...............................................

当webpack-server启动时，页面看起来像这样：

Generated wdist/index.html on webpack-server

因为Generated index.html正在

var path = 'C:/source/kjopslosning-smb/ksmb-frontend/app/index-webpack.html';
var html = <!DOCTYPE html>........</html>
    ;
    window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
    module.exports = path;

这是否意味着index-webpack.html并未排除ngtemplate-loader？

更新

更改加载器的命令（ngtemplate-loader，然后是html-loader）后，我收到错误：

ERROR in   Error: C:\source\kjopslosning-smb\ksmb-frontend\app\index-webpack.html:73
  window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
  ^
  ReferenceError: window is not defined

我认为是因为index-webpack.html没有从ngtemplate-loader中排除，但 我确实 排除了此加载器的内部选项。

有什么想法吗？

Answer 1

将ngtemplate-loader的changin配置结束为：

{
  test: /\.html$/,
  exclude: [path.resolve(__dirname, './node_modules'), path.resolve(__dirname, './app/index-webpack.html')],
  use: [
    {
      loader: 'ngtemplate-loader',
      options: {
        relativeTo: path.resolve(__dirname + '/app/views'),
      }
    },
    {
      loader: 'html-loader',
      options: {
        root: path.resolve(__dirname, './app/images'),
        attrs: ['img:src', 'link:href']

      }
    },
  ]
},

因此排除不起作用因为它位于 {/ 1>}内的选项下，并且应该在测试后正确。另外'？relativeTo ='+ __dirname +'/ app / views'语法在Webpack3中不起作用，所以我也将它从加载器定义中移除到了加载器的选项。

ngtemplate-loader问题ReferenceError：未定义窗口

生成的wdist / index.html：

项目结构

webpack.config.js

更新

1 个答案: