模板解析错误:意外的结束标记 | 模板解析错误
本文介绍了模板解析错误:意外的结束标记的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述 在我的应用程序中重新加载某些路由时出现错误.第一次加载工作正常 http://localhost:8001
,所有其他路由从那里工作.但是,如果我在其他路线上重新加载页面,则会在下面出现异常...
例如:
http://localhost:8001
有效http://localhost:8001/application
有效http://localhost:8001/application/
不起作用http://localhost:8001/application/add
不起作用有人知道为什么会这样吗?
例外: 例外:模板解析错误:意外的结束标记head"(<link rel="stylesheet" href="/static/styles/default.css"><!-- endinject -->[错误 ->]<身体>"): RootRoute@12:0意外的结束标记html"(
[错误 ->]</html>"): RootRoute@38:0
root.route.ts: @Component(...)@RouteConfig([{ path: '/', name: 'Root', 组件: DashboardComponent, useAsDefault: true },{ path: '/application/...', name: 'Application', 组件: ApplicationRoute},{ path: '/:unknown', redirectTo: ['/Root'] }])导出类 RootRoute {...}
application.route.ts: @Component({ 模板:`<p>虚拟模板...</p>` })导出类 Dummy {}@成分(...)@RouteConfig([{ path: '/', name: 'Root', component: Dummy },{ 路径:'/add',名称:'Add',组件:Dummy }])导出类 ApplicationRoute 扩展 RouteComponent {...}
index.html: <头><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" type="image/x-icon" href="/favicon.ico"><!-- 注入:css --><link rel="stylesheet" href="/static/styles/default.css"><!-- endinject -->头部><身体><app class="theme-default"><div class="app-loader">加载</应用程序><!-- 注入: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 --><!-- 注入: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 --></html>
更新: 我做了一些调试,结果发现错误是由 TemplateNormalizer
,更具体地说是 HtmlParser.parse()
方法.当我从
中删除
标签时,错误消失了.但是没有其他事情发生 - 应用程序没有显示 - 即使 SystemJS
加载了背景...
我还注意到我的一项服务返回了奇怪的结果,原来我使用了相对 URL.这导致我将 <base href="/">
添加到标题中并解决了所有问题......我不知道为什么,但它接缝 provide(APP_BASE_HREF, { useValue: '/' })
来自 bootstrap.ts
在某些地方被忽略...
解决方案
另见 Angular 2 路由器没有设置基本的 href
https://angular.io/docs/ts/latest/guide/router.html
在
标签之后添加基本元素.如果 app
文件夹是应用程序根目录,就像我们的应用程序一样,请设置 href
值完全 ,如下所示.
或者添加
import {provide} from 'angular2/core';从'angular2/router'导入{APP_BASE_HREF};引导程序(应用程序组件,[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
workshttp://localhost:8001/application
workshttp://localhost:8001/application/
doesn't workhttp://localhost:8001/application/add
doesn't workAnyone 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
<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.
这篇关于模板解析错误:意外的结束标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
08-14 20:03