Sas*_*sxa 7 angular2-routing 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
Run Code Online (Sandbox Code Playgroud)
@Component(...)
@RouteConfig([
{ path: '/', name: 'Root', component: DashboardComponent, useAsDefault: true },
{ path: '/application/...', name: 'Application', component: ApplicationRoute},
{ path: '/:unknown', redirectTo: ['/Root'] }
])
export class RootRoute {...}
Run Code Online (Sandbox Code Playgroud)
@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 {...}
Run Code Online (Sandbox Code Playgroud)
<!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>
Run Code Online (Sandbox Code Playgroud)
我做了一些调试,结果发现错误TemplateNormalizer,更具体地说是通过HtmlParser.parse()方法生成的.当我删除<meta>标签时,<head>错误消失了.但没有其他事情发生 - 应用程序没有显示 - 只有<div class="app-loader">渲染,即使SystemJS在后台加载所有模块...
我还注意到我的一个服务是返回奇怪的结果,结果我使用了相对URL.这使我添加<base href="/">到标题和固定的所有问题......我不知道为什么,但它接缝provide(APP_BASE_HREF, { useValue: '/' })从bootstrap.ts一些地方被忽略?
https://angular.io/docs/ts/latest/guide/router.html
在标签后面添加基本元素
<head>。如果该app文件夹是应用程序根目录(就像我们的应用程序一样),请完全按照此处所示设置href值。
<base href="/">
Run Code Online (Sandbox Code Playgroud)
或者添加
import {provide} from 'angular2/core';
import {APP_BASE_HREF} from 'angular2/router';
bootstrap(AppComponent, [
ROUTER_PROVIDERS,
provide(APP_BASE_HREF, {useValue : '/' });
]);
Run Code Online (Sandbox Code Playgroud)
在你的引导程序中。