title: Template parse error: Unexpected closing tag
body: <p>I'm getting an error when reloading some of the routes in my app. First load works fine <code>http://localhost:8001</code>, and all other routes work from there. But if I reload page on some other route I get an exception below...</p>
  
  <p>For example:</p>
  
  <ul>
  <li><code>http://localhost:8001</code> works</li>
  <li><code>http://localhost:8001/application</code> works</li>
  <li><code>http://localhost:8001/application/</code> doesn't work</li>
  <li><code>http://localhost:8001/application/add</code> doesn't work</li>
  </ul>
  
  <p><strong>Anyone knows why is this happening?</strong></p>
  
  <h3>EXCEPTION:</h3>
  
  <pre><code>EXCEPTION: Template parse errors:
  Unexpected closing tag "head" ("
    &lt;link rel="stylesheet" href="/static/styles/default.css"&gt;
    &lt;!-- endinject --&gt;
  [ERROR -&gt;]&lt;/head&gt;
  
  &lt;body&gt;
  "): RootRoute@12:0
  Unexpected closing tag "html" ("
  &lt;/body&gt;
  
  [ERROR -&gt;]&lt;/html&gt;"): RootRoute@38:0
  </code></pre>
  
  <h3>root.route.ts:</h3>
  
  <pre><code>@Component(...)
  @RouteConfig([
    { path: '/', name: 'Root', component: DashboardComponent, useAsDefault: true },
    { path: '/application/...', name: 'Application', component: ApplicationRoute},
    { path: '/:unknown', redirectTo: ['/Root'] }
  ])
  export class RootRoute {...}
  </code></pre>
  
  <h3>application.route.ts:</h3>
  
  <pre><code>@Component({ template: `&lt;p&gt;Dummy Template...&lt;/p&gt;` })
  export class Dummy {}
  
  @Component(...)
  @RouteConfig([
    { path: '/', name: 'Root', component: Dummy },
    { path: '/add', name: 'Add', component: Dummy }
  ])
  export class ApplicationRoute extends RouteComponent {...}
  </code></pre>
  
  <h3>index.html:</h3>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
    &lt;link rel="icon" type="image/x-icon" href="/favicon.ico"&gt;
    &lt;!-- inject:css --&gt;
    &lt;link rel="stylesheet" href="/static/styles/default.css"&gt;
    &lt;!-- endinject --&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;app class="theme-default"&gt;
      &lt;div class="app-loader"&gt;
        loading
      &lt;/div&gt;
    &lt;/app&gt;
    &lt;!-- inject:js --&gt;
    &lt;script src="/static/scripts/angular2-polyfills.js"&gt;&lt;/script&gt;
    &lt;script src="/static/scripts/system.src.js"&gt;&lt;/script&gt;
    &lt;script src="/static/scripts/Rx.js"&gt;&lt;/script&gt;
    &lt;script src="/static/scripts/angular2.dev.js"&gt;&lt;/script&gt;
    &lt;script src="/static/scripts/http.dev.js"&gt;&lt;/script&gt;
    &lt;script src="/static/scripts/router.dev.js"&gt;&lt;/script&gt;
    &lt;script src="/static/scripts/system.conf.js"&gt;&lt;/script&gt;
    &lt;!-- endinject --&gt;
  
    &lt;!-- inject:brsync --&gt;
    &lt;script type='text/javascript' id="__bs_script__"&gt;//&lt;![CDATA[
      document.write("&lt;script async src='http://HOST:8888/browser-sync/browser-sync-client.2.11.1.js'&gt;&lt;\/script&gt;".replace("HOST", location.hostname));
  //]]&gt;&lt;/script&gt;
  
    &lt;!-- endinject --&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <h1>UPDATE:</h1>
  
  <p>I did some debugging and it turns out errors are generated by <a href="https://github.com/angular/angular/blob/master/modules/angular2/src/compiler/template_normalizer.ts" rel="noreferrer"><code>TemplateNormalizer</code></a>, more specifically by <a href="https://github.com/angular/angular/blob/master/modules/angular2/src/compiler/html_parser.ts" rel="noreferrer"><code>HtmlParser.parse()</code></a> method. When I removed <code>&lt;meta&gt;</code> tags from <code>&lt;head&gt;</code> errors were gone. But nothing else was happening - app didn't show - only <code>&lt;div class="app-loader"&gt;</code> was rendered even though <code>SystemJS</code> loaded all the modules in the background...</p>
  
  <p>I also noticed one of my services was returning weird results, turns out I used relative URL. This lead me to add <code>&lt;base href="/"&gt;</code> to the header and that fixed all the issues... I'm not sure why, but it seams <code>provide(APP_BASE_HREF, { useValue: '/' })</code> from <code>bootstrap.ts</code> is ignored in some places...</p>