AngularJS中$templateCache与ng-template缓存异常问题

碰到这种问题确实头疼，尤其是大型应用不敢随便改现有结构，我来帮你捋清楚根源和可行的解决办法：

问题根源 #

你遇到的核心冲突在于两种模板在$templateCache中的存储键格式不一致：

• 独立HTML文件模板：以完整路径（比如app/views/customer/customer-history.html）作为缓存键存储
• 内联<script type='text/ng-template'>模板：仅以你定义的id值（比如customer-history）作为缓存键存储

而你的缓存键追加逻辑，会给所有模板请求（包括内联模板的ID）自动加上?v=xxx参数，导致Angular去查找customer-history/?v=1234567890这个缓存键——但它根本不存在，自然触发404请求。

根本解决方案 #

方案1：调整缓存键拦截逻辑，精准区分模板类型 #

这是成本最低、最适合你的方案，不需要修改任何现有模板，只需要优化请求拦截逻辑：

• 只对带.html后缀的文件路径追加缓存键（因为内联模板ID一般不带后缀）
• 或者直接判断请求的URL是否已存在于$templateCache中，存在则跳过追加

举个用$http拦截器实现的例子：

angular.module('yourApp').config(['$httpProvider', function($httpProvider) {
  $httpProvider.interceptors.push(['$templateCache', function($templateCache) {
    return {
      request: function(config) {
        // 仅对HTML文件请求追加缓存键，排除已在缓存中的内联模板
        const isHtmlFile = config.url.endsWith('.html');
        const isInCache = !!$templateCache.get(config.url);
        
        if (isHtmlFile && !isInCache) {
          const separator = config.url.includes('?') ? '&' : '?';
          config.url += `${separator}v=1234567890`;
        }
        return config;
      }
    };
  }]);
}]);

这个逻辑既保证了文件模板的缓存键正常追加，又不会干扰内联模板的缓存读取，完全适配你现有两种模板的存储格式。

方案2：统一模板ID命名规则（适合长期规范） #

如果后续有重构计划，可以把内联模板的id改成和文件模板一致的路径格式（比如app/views/customer/customer-history.html），这样缓存键追加逻辑就能统一处理所有模板。不过你提到是大型应用，迁移成本高，这个方案可以作为长期优化方向，新模板统一遵循即可。

方案3：优化gulp-templatecache配置 #

如果你用gulp-templatecache打包模板，可以通过transformUrl选项统一所有模板的缓存键格式：
比如把文件模板的路径转换成和内联模板一致的纯名称：

gulp.src(['app/views/**/*.html', 'app/templates/**/*.html'])
  .pipe(templateCache({
    transformUrl: function(url) {
      // 提取文件名并去掉后缀，比如 app/views/customer/customer-history.html → customer-history
      return url.split('/').pop().replace('.html', '');
    }
  }))
  .pipe(gulp.dest('dist/js'));

这样所有模板的缓存键都会统一成纯名称，缓存键追加逻辑就不会出错，但要注意确保所有模板ID唯一，避免冲突。

关于你的临时方案 #

你现在用inCache方法跳过内联模板的思路是对的，但方案1的拦截逻辑更健壮——它从请求的根源上区分了两种模板，不需要依赖手动判断，后续新增模板也能自动适配。

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