问题描述
我正在尝试使用 html-loader + webpack 5 加载 AngularJs 应用模板(html)。许多人放弃了 templateCache,偏爱 html-loader。但就我而言,我真的无法让它发挥作用。
我什至尝试过 raw-loader、angularjs-template-loader 和 ngtemplate-loader。但是 webpack 总是抱怨加载器。
错误: “模块解析失败:意外令牌 (1:0) 您可能需要一个合适的加载器来处理此文件类型,目前没有配置加载器来处理此文件。见https://webpack.js.org/concepts#loaders"
> <div class="panel">
| <div class="panelContent gridContainer">
| <div class="dataGridHeader">
这是我的 webback.config.js:
module:{
rules: [
{
test: /\.html$i/,loader: 'html-loader',// use: [
// // {
// // loader: "ngtemplate-loader",// // options: {
// // relativeto: "src/",// // },// // },// // "ngtemplate-loader",// // "raw-loader",// {
// loader: "html-loader",// options: {
// minimize: true,// },// },// ],},]
}
指令:
const directive = {
restrict: "E",template: require("ROOT/app/views/templates/dataGrid.html"),controller: dataGridController,controllerAs: "vm",bindToController: true
}
return directive;
我在上面的 webpack 配置文件中尝试了注释选项,但都导致了相同的错误。
我的 package.json:
Portion of devDependencies:
"devDependencies": {
"@babel/cli": "^7.0.0","@babel/core": "^7.11.1","@babel/plugin-Syntax-dynamic-import": "^7.8.3","@babel/preset-env": "^7.11.0","angularjs-template-loader": "^0.1.2","babel-loader": "^8.0.0","html-loader": "^2.1.2","ngtemplate-loader": "^2.1.0","raw-loader": "^4.0.2","speed-measure-webpack-plugin": "^1.5.0","webpack": "^5.36.2","webpack-cli": "^4.7.0","webpack-dev-server": "^3.11.2","webpack-merge": "^5.7.3"
}
有人遇到过这个问题吗?
解决方法
我们能够通过将 import * as templateName from './template.html'
之类的所有导入替换为 import templateName from './template.html
来解决此问题。希望这对您有所帮助。