Gulp angular templatecache root issue

Question

I'm part of a team developing an AngularJS application and right now I'm working on modifying the Gulp build script. Part of my task is prepopulating the template cache (up till now we have been loading the templates as the routes/directives needed them).

The Gulp task is basically:

var templateCache = require('gulp-angular-templatecache');

gulp.task('cache-templates', function(){
    var dest = destinationPath,
        src = sourcePath;

    return gulp.src(src)
        .pipe(plumber())
        .pipe(templateCache('templates.js', {root: './templates/'}))
        .pipe(gulp.dest(dest));
});

The problem I am getting is that gulp removes the "./" from the root. For instance:

$templateCache.put("templates/foo.html","<div>some html</div>");

in stead of

$templateCache.put("./templates/foo.html","<div>some html</div>");

The module is loaded correctly into app.js and declared as a dependency, and if I do put the "./"'s as a prefix manually, after building, everything works fine. So could you please tell me how to force Gulp to include the "./" prefix in my root?

Note: Every other prefix works fine, it just removes the "./". I would prefer it if I could solve this from within the Gulpfile, without having to modify the templateUrl's in my directives and $routeProvider, because the application is rather large and that would only be asking for trouble. Thanks! :)

Why do you need the prefix ./? Can't you just work without it everywhere? — Michael
./ is anyways current directory, so what difference does it makes having or not having it? — harishr
Because the key strings in the templatecache no longer match the templateURL's without the ./, so Angular doesn't load them. Also, I'm looking for a simpler / more elegant solution than just going into EVERY file in my app and modifying the tempalteUrl. — OntZ

harishr harishr · Accepted Answer · 2015-06-26T06:28:59

What you can do is use gulp-replace and replace 'templates/' with './templates/'.

Old Answer

In the options that you pass to template you can provide a base function

   .pipe(templateCache('templates.js', {root: './templates/', base: baseFn}))

you can modify the file-path there

        var baseFn = function (file) { return './' + file.relative; }

Gulp angular templatecache root issue

1 Answers