How can I use LiveReload with an AngularJS templateURL

EDIT -------------------------

When I wrote the initial answer there was not really anything really stable enough and thats why I make some adjustments to livereload. Since that time a lot changed. At this moment (early 2017) I use browser-sync & webpack, HMR.

EDIT -------------------------

I got it to work on my Angular/Ionic project.

As I assume that more people are looking for something like it I made a github repo: https://github.com/stefanKuijers/live-templates

My solution uses live.js which Martin Kool wrote (check ). I just added some code. This is how it works: You just add the path to your router in live-templates.js. The live-templates.js gets the routers routes and adds them to the live.js heartbeat.

How to use it: - get script & save - change the routerURL variable on line 27 to the url of your router - include script on the page(s) where you require live reload

Let me know or and how it worked for you guys!

Cheers

I simplified my Gruntfile.js may helpful:

appPath:"", //your app pathwatch: {    options: {        livereload: 35729,        debounceDelay: 500    },    gruntfile: {        files: ['Gruntfile.js']    },    css: {        //if you use less or sass,you can compile and copy here    },    js: {        files: ['<%= appPath %>/{scripts}/{,**/}*.js'],        tasks: ['newer:all']    },    html: {        files: ['<%= appPath %>/{views}/{,**/}*.html'],        tasks: ['newer:all']    },    livereload: {        options: {            livereload: 35729,            debounceDelay: 500        },        files: [            '<%= appPath %>/{,**/}*.html',            '<%= appPath %>/styles/{,**/}*.css',            '<%= appPath %>/images/{,**/}*.{png,jpg,jpeg,gif,webp,svg}'        ]    }}

and run in :

grunt.registerTask('server', [    ...,    'watch']);

Maybe try this middleware:

var modRewrite = require('connect-modrewrite');

Then on the connect:

connect: {  options: {    port: 9000,    // Change this to '0.0.0.0' to access the server from outside.    hostname: '0.0.0.0',    livereload: 35729  },  livereload: {    options: {      open: true,      base: [        '.tmp',        '<%= yeoman.app %>'      ],      middleware: function(connect, options) {        var middlewares = [];        //Matches everything that does not contain a '.' (period)          middlewares.push(modRewrite(['^[^\\.]*$ /index.html [L]']));        options.base.forEach(function(base) {            middlewares.push(connect.static(base));        });        return middlewares;      }    }  }

You should also install modrewrite: npm install connect-modrewrite --save-dev

I am only guessing here. I hope it helps.