角度模板缓存不起作用答案

【问题标题】：Angular Template cache not working角度模板缓存不起作用
【发布时间】：2023-03-08 03:20:01
【问题描述】：

我有一个使用 gulp 和 angular 的项目。我想单击一个按钮并弹出一个包含要显示的 html 的窗口。

在 build.js 文件中我有以下代码：

gulp.task('templates', function() {
  gulp.src(['!./apps/' + app + '/index.html', './apps/' + app + '/**/*.html'])
    .pipe(plugins.angularTemplatecache('templates.js', {
      standalone: true,
      module: 'templates'
    }))
    .pipe(gulp.dest(buildDir + '/js'));
});

在我的 app.js 文件中：

.controller('PopupCtrl', function($scope, ngDialog) {
  $scope.clickToOpen = function () {
      ngDialog.open({ 
        template: 'templates/popup.html'
      });
  };
})

点击按钮时出现错误：

GET http://mylocalhost:3000/templates/popup.html 404 (Not Found)

我的 templates.js 文件包含：

angular.module("templates", []).run(["$templateCache", function($templateCache) {
$templateCache.put("templates/popup.html", "my html") ...etc

为什么模板缓存无法识别对 templates/popup.html 的调用并显示缓存中的内容而不是查看 404 的 URL？

只是说我尝试过的，我手动将模板文件复制到它正在查找的目录中并找到它。这不是解决方案，因为我希望它从缓存中获取。

谢谢

【问题讨论】：

标签： javascript angularjs caching gulp

【解决方案1】：

您还必须将templates 模块指定为您的模块的依赖项。例如：

angular.module('myApp', ['templates', 'ngDialog'])

希望这会有所帮助。

【讨论】：

谢谢！你救了我的一天！（即使是 4 年后的 2018 年 :)）

【解决方案2】：

此答案适用于可能遇到此问题的其他任何人，但他们确信他们确实包含了已接受答案所述的依赖项：

确保验证您使用的“密钥”是否匹配。在我的场景中，发生了以下情况：

$templateCache.put('/someurl.html', 'some value');

但它正在寻找'someurl.html'。一旦我将代码更新为：

$templateCache.put('someurl.html', 'some value');

一切都开始工作了。

【讨论】：

也发生在我身上。该死的图坦！
大小写也很重要！
我正在使用 gulp 生成“$templateCache”，路径从“templatesUrl”中引用的实际文件夹的子文件夹开始。这帮助我弄清楚了这一点。
我刚遇到这个问题，结果发现URL前面有一个空格。 ?
在我的例子中，我有一个拦截器将应用程序版本附加到 url 以进行缓存破坏。因此，如果 url 已经加载到 $templateCache 中，我必须更改我的拦截器以不这样做。

【解决方案3】：

您是另一种方法，您甚至可以通过它消除对 $templatecache 的依赖。

您可以使用这个gulp plugin，它可以读取您的路线、指令并将 templateUrl 替换为 templateUrl 中引用的模板。

src
+-hello-world
  |-hello-world-directive.js
  +-hello-world-template.html

hello-world-directive.js：

angular.module('test').directive('helloWorld', function () {
    return {
        restrict: 'E',
        // relative path to template
        templateUrl: 'hello-world-template.html'
    };
});

hello-world-template.html：

<strong>
    Hello world!
</strong>

gulpfile.js：

var gulp = require('gulp');
var embedTemplates = require('gulp-angular-embed-templates');

gulp.task('js:build', function () {
    gulp.src('src/scripts/**/*.js')
        .pipe(embedTemplates())
        .pipe(gulp.dest('./dist'));
});

gulp-angular-embed-templates 将生成以下文件：

angular.module('test').directive('helloWorld', function () {
    return {
        restrict: 'E',
        template:'<strong>Hello world!</strong>'
    };
});

【讨论】：

【解决方案4】：

我的 2 美分（因为我也为此付出了代价。）

1) 确保您的主模块中有依赖项。（如果您要为模板创建单独的模块）。

2) 确保在模板 url 中处理前导 \。

3) 确保文件名中使用的文本大小写与模板 url 中使用的大小写匹配。（是的这个）。

【讨论】：