Template parse error: Unexpected closing tag
Template parse error: Unexpected closing tag
我在我的应用程序中重新加载某些路线时遇到错误。第一次加载工作正常 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
, more specifically by HtmlParser.parse()
方法产生的。当我从 <head>
中删除 <meta>
标签时,错误就消失了。但没有其他事情发生 - 应用程序没有显示 - 即使 SystemJS
在后台加载了所有模块,也只呈现了 <div class="app-loader">
...
我还注意到我的一项服务返回了奇怪的结果,原来我使用了相对 URL。这导致我将 <base href="/">
添加到 header 并解决了所有问题......我不确定为什么,但它从 bootstrap.ts
中接缝 provide(APP_BASE_HREF, { useValue: '/' })
被忽略有些地方...
将您的 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 {...}
另见
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 : '/' });
]);
在你的 bootstrap.
我正在处理 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>
我在我的应用程序中重新加载某些路线时遇到错误。第一次加载工作正常 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
, more specifically by HtmlParser.parse()
方法产生的。当我从 <head>
中删除 <meta>
标签时,错误就消失了。但没有其他事情发生 - 应用程序没有显示 - 即使 SystemJS
在后台加载了所有模块,也只呈现了 <div class="app-loader">
...
我还注意到我的一项服务返回了奇怪的结果,原来我使用了相对 URL。这导致我将 <base href="/">
添加到 header 并解决了所有问题......我不确定为什么,但它从 bootstrap.ts
中接缝 provide(APP_BASE_HREF, { useValue: '/' })
被忽略有些地方...
将您的 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 {...}
另见
https://angular.io/docs/ts/latest/guide/router.html
Add the base element just after the
<head>
tag. If theapp
folder is the application root, as it is for our application, set thehref
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 : '/' });
]);
在你的 bootstrap.
我正在处理 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>