模板解析错误：意外关闭标签 [英] Template parse error: Unexpected closing tag

查看：889
本文介绍了模板解析错误：意外关闭标签的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在我的应用程序重新加载某些路线时，得到一个错误。首先负载正常工作的http：//本地主机：8001 ，和所有其他的路线从那里工作。但是，如果我重新加载一些其他的途径页，我得到下面的异常...

例如：


  • 的http：//本地主机：8001 和

  • 的http：//本地主机：8001 /应用程序和

  • 的http：//本地主机：8001 /应用/ 不起作用

  • 的http：//本地主机：8001 /应用/添加不起作用

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

异常：

 例外：模板解析错误：
意外的结束标记头（
  ＆LT;链接rel =stylesheet属性HREF =/静态/风格/ default.css＆GT;
  ＆所述;！ -  endinject  - ＆GT;
[错误 - ＆GT;＆LT; /头＆GT;＆LT;身体GT;
）：RootRoute @ 12：0
意外的结束标记HTML（
＆LT; /身体GT;[错误 - ＆GT;＆LT; / HTML＆gt;中）：RootRoute @ 38：0

root.route.ts：

  @Component（...）
@RouteConfig（[
  {路径：'/'，名称：'根'，成分：DashboardComponent，useAsDefault：真正}，
  {路径：'/应用/ ...'，名称：应用程序，组成：ApplicationRoute}，
  {路径：'/：未知，redirectTo：['/根']}
]）
出口类RootRoute {...}

application.route.ts：

  @Component（{模板：`＆LT; P＆GT;虚拟模板...＆LT; / P＆GT;`}）
出口类假{}@零件（...）
@RouteConfig（[
  {路径：'/'，名称：'根'，组成：虚拟}，
  {路径：'/加'，名称：添加，组成：虚拟}
]）
出口类ApplicationRoute扩展RouteComponent {...}

index.html的：

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;＆LT; HEAD＆GT;
  ＆LT;间的charset =UTF-8＆GT;
  ＆LT; META NAME =视口CONTENT =WIDTH =设备宽度，初始规模= 1＆GT;  ＆LT;链接rel =图标类型=图像/ X-图标的href =/ favicon.ico的＆GT;
  ＆LT;  - 注射：CSS  - ＆GT;
  ＆LT;链接rel =stylesheet属性HREF =/静态/风格/ default.css＆GT;
  ＆所述;！ -  endinject  - ＆GT;
＆LT; /头＆GT;＆LT;身体GT;
  ＆LT;应用类=主题默认＆GT;
    ＆LT; D​​IV CLASS =应用程序加载器＆GT;
      装载
    ＆LT; / DIV＆GT;
  ＆LT; /应用＆GT;
  ＆LT;  - 注射：JS  - ＆GT;
  ＆LT;脚本的src =/静态/脚本/ angular2-polyfills.js＆GT;＆LT; / SCRIPT＆GT;
  ＆LT;脚本的src =/静态/脚本/ system.src.js＆GT;＆LT; / SCRIPT＆GT;
  ＆LT;脚本的src =/静态/脚本/ Rx.js＆GT;＆LT; / SCRIPT＆GT;
  ＆LT;脚本的src =/静态/脚本/ angular2.dev.js＆GT;＆LT; / SCRIPT＆GT;
  ＆LT;脚本的src =/静态/脚本/ http.dev.js＆GT;＆LT; / SCRIPT＆GT;
  ＆LT;脚本的src =/静态/脚本/ router.dev.js＆GT;＆LT; / SCRIPT＆GT;
  ＆LT;脚本的src =/静态/脚本/ system.conf.js＆GT;＆LT; / SCRIPT＆GT;
  ＆所述;！ -  endinject  - ＆GT;  ＆LT;  - 注射：brsync  - ＆GT;
  ＆LT;脚本类型=文/ JavaScript的'ID =__ __ bs_script＆GT; //＆LT;！[CDATA [
    文件撰写（＆LT;脚本异步src='http://HOST:8888/browser-sync/browser-sync-client.2.11.1.js'><\\/script>\".replace(\"HOST\", location.hostname））;
//]]＆GT;＆LT; / SCRIPT＆GT;  ＆所述;！ -  endinject  - ＆GT;
＆LT; /身体GT;＆LT; / HTML＆GT;

更新：

我做了一些调试和原来由<一个正在生成的错误href=\"https://github.com/angular/angular/blob/master/modules/angular2/src/compiler/template_normalizer.ts\"相对=nofollow> TemplateNormalizer ，更具体地的 HtmlParser.parse（） 方法。当我删除＆LT;＆荟萃GT; 从＆LT标签; HEAD＆GT; 错误都不见了。但没有别的发生的一切 - 应用程序没有显示 - 仅＆LT; D​​IV CLASS =应用程序加载器＆GT; 已呈现即使 SystemJS 加载的所有后台模块...

我也注意到我的服务之一是返回奇怪的结果，原来我用相对URL。这导致我＆LT增加;基本href =/＆GT; 来的标题和固定的所有问题......我不知道为什么，但它接缝提供（APP_BASE_HREF，{useValue：'/'}）从 bootstrap.ts 在一些地方忽视...


解决方案

另见的角2路由器没有基础的href设置

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


  头＆GT;

在℃后，添加基本元素标记。如果应用文件夹是应用程序的根，因为这是我们的应用程序，将的href 值的究竟的如下所示。


 ＆LT;基本href =/＆GT;

另外添加

 进口{}提供从'angular2 /核心;
进口{} APP_BASE_HREF从'angular2 /路由器;引导（AppComponent，[
  ROUTER_PROVIDERS，
  提供（APP_BASE_HREF，{useValue：'/'}）;
]）;

在你的引导。

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...

解决方案

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.

这篇关于模板解析错误：意外关闭标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆