I'm getting an error when reloading some of the routes in my app. First load works fine http://localhost:8001, and all other routes work from there. But if I reload page on some other route I get an exception below...

For example:

http://localhost:8001 works
http://localhost:8001/application works
http://localhost:8001/application/ doesn't work
http://localhost:8001/application/add doesn't work

Anyone knows why is this happening?

EXCEPTION:

EXCEPTION: Template parse errors:
Unexpected closing tag "head" ("
  <link rel="stylesheet" href="/static/styles/default.css">
  <!-- endinject -->
[ERROR ->]</head>

<body>
"): RootRoute@12:0
Unexpected closing tag "html" ("
</body>

[ERROR ->]</html>"): RootRoute@38:0

root.route.ts:

@Component(...)
@RouteConfig([
  { path: '/', name: 'Root', component: DashboardComponent, useAsDefault: true },
  { path: '/application/...', name: 'Application', component: ApplicationRoute},
  { path: '/:unknown', redirectTo: ['/Root'] }
])
export class RootRoute {...}

application.route.ts:

@Component({ template: `<p>Dummy Template...</p>` })
export class Dummy {}

@Component(...)
@RouteConfig([
  { path: '/', name: 'Root', component: Dummy },
  { path: '/add', name: 'Add', component: Dummy }
])
export class ApplicationRoute extends RouteComponent {...}

index.html:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="icon" type="image/x-icon" href="/favicon.ico">
  <!-- inject:css -->
  <link rel="stylesheet" href="/static/styles/default.css">
  <!-- endinject -->
</head>

<body>
  <app class="theme-default">
    <div class="app-loader">
      loading
    </div>
  </app>
  <!-- inject:js -->
  <script src="/static/scripts/angular2-polyfills.js"></script>
  <script src="/static/scripts/system.src.js"></script>
  <script src="/static/scripts/Rx.js"></script>
  <script src="/static/scripts/angular2.dev.js"></script>
  <script src="/static/scripts/http.dev.js"></script>
  <script src="/static/scripts/router.dev.js"></script>
  <script src="/static/scripts/system.conf.js"></script>
  <!-- endinject -->

  <!-- inject:brsync -->
  <script type='text/javascript' id="__bs_script__">//<![CDATA[
    document.write("<script async src='http://HOST:8888/browser-sync/browser-sync-client.2.11.1.js'><\/script>".replace("HOST", location.hostname));
//]]></script>

  <!-- endinject -->
</body>

</html>

UPDATE:

I did some debugging and it turns out errors are generated by TemplateNormalizer, more specifically by HtmlParser.parse() method. When I removed <meta> tags from <head> errors were gone. But nothing else was happening - app didn't show - only <div class="app-loader"> was rendered even though SystemJS loaded all the modules in the background...

I also noticed one of my services was returning weird results, turns out I used relative URL. This lead me to add <base href="/"> to the header and that fixed all the issues... I'm not sure why, but it seams provide(APP_BASE_HREF, { useValue: '/' }) from bootstrap.ts is ignored in some places...

回答1:

See also Angular 2 router no base href set

https://angular.io/docs/ts/latest/guide/router.html

Add the base element just after the <head> tag. If the app folder is the application root, as it is for our application, set the href value exactly as shown here.

<base href="/">

Alternatively add

import {provide} from 'angular2/core';
import {APP_BASE_HREF} from 'angular2/router';

bootstrap(AppComponent, [
  ROUTER_PROVIDERS, 
  provide(APP_BASE_HREF, {useValue : '/' });
]);

in your bootstrap.

回答2:

change your application.route.ts with :

@Component({ template: `<p>Dummy Template...</p>` })
export class Dummy {}

@Component(...)
@RouteConfig([
  { path: '/', name: 'Root', component: Dummy, useAsDefault: true },
  { path: '/add', name: 'Add', component: Dummy }
])
export class ApplicationRoute extends RouteComponent {...}