Gulp Angular build templateCache issue

Question

My build.js is using ngHtml2js to convert partials in directives into 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 situated in components folder in components->directives.

The issue is that when I try to deploy the dist folder, the static partial calls from the routes JS files gets fired, 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, the ngHtml2js converts the partials into module.run blocks as

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

But then, why am I getting a 404 error such as

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

Koustuv Sinha · Accepted Answer · 2014-12-23 07:17:58Z

4

Solved it. The reason was templateUrl were given absolute paths (with '/' at beginning), but templateCache uses relative paths. Thus removing the '/' from templateUrls solved the issue

answered Dec 23, 2014 at 7:17

Koustuv Sinha

1,68019 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alexandru R Over a year ago

how did you remove the / from the beginning?

Koustuv Sinha Over a year ago

just removed the '/' from beginning of the templateUrl settings, ie by setting : templateUrl:'components/directives/collapse.html', without the starting /

Jay · Accepted Answer · 2014-12-23 06:16:48Z

1

You need to add the template module as a dependency in your Angular application module. Also ensure that your template cache js file has been loaded in browser before your application code.

answered Dec 23, 2014 at 6:16

Jay

1,4781 gold badge10 silver badges9 bronze badges

1 Comment

Koustuv Sinha Over a year ago

sorry couldn't get you. how to add template module as a dependency? Also the code works normally in gulp serve, but only breaks in gulp serve:dist

Alexandru R · Accepted Answer · 2015-03-10 08:21:15Z

0

I added this config for main app. It overwrites template mapping for ngnewroute

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

edited Mar 10, 2015 at 8:21

answered Mar 5, 2015 at 15:34

Alexandru R

8,89416 gold badges70 silver badges104 bronze badges

Collectives™ on Stack Overflow

Gulp Angular build templateCache issue

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related