Clever Geek Handbook

Gulp Angular build templateCache issue

My build.js

uses ngHtml2js

to convert partials to directives in js files.

gulp.task('partials', function () {
  return gulp.src('src/{components,app}/**/*.html')
    .pipe($.ngHtml2js({
      moduleName: 'testApp'
    }))
    .pipe(gulp.dest('.tmp'))
    .pipe($.size());
});

Where my directives are located in the components folder in the components-> directives.

The problem is, when I try to expand the dist folder, static partial calls from the route JS files are triggered and I get a 404.

angular.module(ModuleName)
        .directive('collapseWindow', ['$parse', function (parse) {

            return {
                templateUrl:'/components/directives/collapse.html',
                transclude:true,
                restrict: 'A'

In my understanding, ngHtml2js converts partial parts to modules.run blocks as

module.run(['$templateCache', function($templateCache) {
  $templateCache.put('components/directives/collapse.html',
    '<div class="collapsible">\n' ...

But then why am I getting 404 error like

 GET http://localhost:3000/components/directives/collapse.html 404 (Not Found)
+3


source to share


3 answers


I decided. The reason was that templateUrl got absolute paths (with a "/" beginning), but templateCache uses relative paths. So removing the '/' from Urls pattern solved the problem



+4


source


You need to add the template module as a dependency in your Angular application module. Also make sure your cache file jQ file is loaded in browser before your application code.



0


source


I added this configuration for the main application. It overwrites pattern matching for ngnewroute

.config (function ($componentLoaderProvider) {
  $componentLoaderProvider.setTemplateMapping(function (name) {
    return 'components/' + name + '/' + name + '.html';
  });
})
0


source






More articles:


All Articles