Webpack 4 Loader实现Angular模板缓存，解决Angular 1.x库模板URL找不到问题

这个问题我碰到过好多次了——开发时Webpack能帮你处理模板路径，但打包成独立库给别的项目用的时候，模板路径就失效了，因为那些模板文件并没有跟着库一起分发，或者路径在新环境下不对。核心解决方案就是把模板预编译并注入Angular的$templateCache，这样Angular就不会去请求外部URL，直接从缓存里拿模板。下面是具体的实现步骤：

1. 安装必要的Webpack Loaders #

我们需要两个Loader配合工作：

• html-loader：把HTML文件转换成可被JS识别的字符串
• ngtemplate-loader：把转换后的字符串注入到Angular的$templateCache中

执行安装命令：

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

2. 配置Webpack的模块规则 #

在你的webpack.config.js里，针对.html模板文件添加处理规则，确保Webpack能正确编译并缓存模板：

const path = require('path');

module.exports = {
  // ...其他基础配置（比如入口文件、模式等）
  module: {
    rules: [
      // ...其他loader规则（比如babel-loader处理ES6+代码）
      {
        test: /\.html$/,
        use: [
          {
            loader: 'ngtemplate-loader',
            options: {
              // 模板的根路径，确保缓存的key和你templateUrl里写的路径完全匹配
              relativeTo: path.join(__dirname, 'src/'),
              // 你的Angular库模块名称，模板会被缓存到这个模块的$templateCache中
              module: 'your-library-module'
            }
          },
          {
            loader: 'html-loader',
            options: {
              // 生产环境建议开启压缩，减小库体积
              minimize: process.env.NODE_ENV === 'production'
            }
          }
        ],
        exclude: /node_modules/
      }
    ]
  },
  output: {
    // 配置库的输出格式，确保能在CommonJS、AMD、全局变量等多种环境中使用
    filename: 'your-library.min.js',
    library: 'YourLibrary',
    libraryTarget: 'umd',
    umdNamedDefine: true
  }
};

3. 修改你的指令/组件代码 #

关键一步：在使用模板的指令/组件文件中，手动import对应的模板文件，这样Webpack才能触发Loader处理它。

比如原来的指令代码：

angular.module('your-library-module').directive('myCustomDirective', function() {
  return {
    // 原来的模板路径
    templateUrl: './templates/my-directive.html'
  };
});

修改后加上模板导入：

// 导入模板，让Webpack识别并处理它
import './templates/my-directive.html';

angular.module('your-library-module').directive('myCustomDirective', function() {
  return {
    // 保持原来的templateUrl不变即可
    templateUrl: './templates/my-directive.html'
  };
});

4. 验证打包结果 #

打包完成后，打开你的库文件，应该能看到类似这样的代码片段：

angular.module('your-library-module').run(['$templateCache', function($templateCache) {
  $templateCache.put('./templates/my-directive.html', '<div class="my-directive">...</div>');
}]);

这说明模板已经被成功注入到$templateCache里了，其他项目引入你的库后，Angular会直接从缓存中读取模板，不会再出现“模板URL未找到”的错误。

常见坑点提醒 #

• relativeTo路径要准确：如果配置的根路径和templateUrl的相对路径不匹配，缓存的key就会不对，Angular还是找不到模板。
• 模块名要完全一致：ngtemplate-loader的module选项必须和你的Angular库模块名称完全相同，否则模板会被缓存到错误的模块里。
• 不要漏了导入模板：如果没手动import模板文件，Webpack根本不会处理它，自然不会注入缓存。

内容的提问来源于stack exchange，提问作者Chandra Kant Paliwal