例如:
> 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:’/’})…
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@H_403_47@ 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 : '/' }); ]);
在你的引导程序中.