Webpack环境下AngularJS依赖库$templateCache模板加载失败求助

别担心，这种第三方库依赖templateUrl导致Webpack加载失败的场景我碰过好多次，给你几个实用的解决思路：

Webpack默认不会处理第三方模块里的templateUrl引用，我们可以通过这两个loader把模板文件转成字符串，让Angular能直接识别。

1. 先安装依赖：

npm install html-loader exports-loader --save-dev

2. 在webpack.conf.js的模块规则里添加针对第三方库模板的配置：

const path = require('path');

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // 处理你自己项目的模板文件
      { test: /\.html$/, use: 'html-loader', exclude: /node_modules/ },
      // 专门处理angular-ui-bootstrap的模板
      {
        test: /angular-ui-bootstrap\/.*\.html$/,
        use: [
          'exports-loader?module.exports.toString()',
          'html-loader'
        ],
        include: path.resolve(__dirname, 'node_modules')
      }
    ]
  }
};

exports-loader的作用是把html-loader处理后的模板内容以字符串形式导出，这样Angular读取templateUrl对应的模块时，就能拿到模板字符串了。

这个方案更贴合Angular的工作机制，它会把模板文件直接注入到Angular的$templateCache里，第三方库的templateUrl就能直接命中缓存，不需要修改任何库代码。

1. 安装依赖：

npm install ngtemplate-loader html-loader --save-dev

2. 配置Webpack规则：

const path = require('path');

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          // 指定模板的相对路径，确保$templateCache的key和库的templateUrl匹配
          `ngtemplate-loader?relativeTo=${path.resolve(__dirname, 'node_modules/angular-ui-bootstrap')}`,
          'html-loader'
        ],
        include: /node_modules\/angular-ui-bootstrap/
      }
    ]
  }
};

这个方法的优势是一劳永逸，配置好后所有用templateUrl的第三方Angular组件都能正常加载模板。

• 确保你的vendor.ts里正确导入了angular-ui-bootstrap，比如：import 'angular-ui-bootstrap';，这样Webpack才会把它打包进vendor bundle。
• 如果上述方法还是不行，可以检查一下Webpack的resolve配置，确保模块路径解析没有问题，比如有没有正确设置modules: ['node_modules']。

内容的提问来源于stack exchange，提问作者TravRob