我试图切换我的Angular 1.5.3应用程序，使用Webpack 3.10.0进行捆绑，并使用ngtemplate-loader使角度模板正常工作。 感谢任何帮助，因为我已经坚持了很长时间。
我现在遇到的问题是在生成的html文件中包含<html></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
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中排除，但 我确实 排除了此加载器的内部选项。
有什么想法吗？
答案 0 :(得分：0)
将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中不起作用，所以我也将它从加载器定义中移除到了加载器的选项。