I tried to follow the guide to write a directive, but as soon as I switched from template to templateUrl, I found that I could edit my template .html file but the browser wouldn't reload my changes.

The problem turned out to be that, when I did npm start to start http-server, my template file was being sent back with a cache-control: max-age=3600 HTTP header, telling my browser to cache the file, and not even check again, for an hour. When I hit Reload, the browser would reload the top-level page despite this header, and it would reload the templates for my routes, but neither Chrome nor Firefox would reload the templates for my directives -- for those templates, they took the cache-control header very seriously.

The http-server docs mention that there's a parameter to configure the cache-control header, and it fixed the problem. The fix is to change this line in package.json:

"start": "http-server -a localhost -p 8000",

to:

"start": "http-server -a localhost -p 8000 -c-1",