Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Gulp Angular build templateCache issue

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)
like image 298
Koustuv Sinha Avatar asked Dec 23 '14 06:12

Koustuv Sinha


2 Answers

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

like image 88
Koustuv Sinha Avatar answered Nov 15 '22 14:11

Koustuv Sinha


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.

like image 31
Jay Avatar answered Nov 15 '22 14:11

Jay