更新：

Question

我在我的应用中重新加载某些路线时遇到错误。第一次加载工作正常http://localhost:8001，所有其他路线都在那里工作。但如果我在其他路线上重新加载页面，我会在下面得到一个例外...

例如：

http://localhost:8001正常工作
http://localhost:8001/application正常工作
http://localhost:8001/application/不起作用
http://localhost:8001/application/add不起作用

任何人都知道为什么会这样？

例外：

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>

更新：

我做了一些调试，结果发现错误是由TemplateNormalizer生成的，更具体地说是HtmlParser.parse()方法生成的。当我从<meta>移除<head>代码时，错误消失了。但是没有其他事情发生 - 应用程序没有显示 - 只有<div class="app-loader">被呈现，即使SystemJS加载了后台的所有模块......

我还注意到我的一个服务正在返回奇怪的结果，结果我使用了相对URL。这导致我在标题中添加了<base href="/">并解决了所有问题......我不确定原因，但在某些地方忽略了来自provide(APP_BASE_HREF, { useValue: '/' })的接缝bootstrap.ts。

Answer 1

另见Angular 2 router no base href set

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

在<head>标记之后添加基本元素。如果app文件夹是应用程序根目录，就像我们的应用程序一样，请将href值完全设置为，如下所示。

<base href="/">

或者添加

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

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

在你的引导程序中。

Answer 2

将application.route.ts更改为：

@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 {...}

Answer 3

我正在使用angular 5并收到此错误，因为我正在将参数传递给click函数（例如迭代变量），这是错误的

 <td><a (click)="showReports({{row.site_id}})">{{row.site_name}}</a> </td>

所以我通过使用

解决了这个问题

 <td><a (click)="showReports(row.site_id)">{{row.site_name}}</a> </td>

模板解析错误：意外的结束标记

例外：

root.route.ts：

application.route.ts：

的index.html：

更新：

3 个答案: