angular – 模板分析错误：意外的结束标记

我在我的应用程序中重新加载一些路线时遇到错误.第一次加载工作正常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: '/',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 =“/”>到标题并修复了所有问题…我不知道为什么,但它在某些地方忽略了bootstrap.ts提供的接缝(APP_BASE_HREF,{useValue：’/’})…

另见 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="/">

或者添加

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

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

在你的引导程序中.

angular – 模板分析错误：意外的结束标记

猜你在找的Angularjs相关文章