Geek Answers Handbook

Template parsing error: Unexpected closing tag

I get an error when reloading some routes in my application. The first boot works fine http://localhost:8001 , and all other routes work from there. But if I reload the page along a different route, I get an exception below ...

For instance:

  • http://localhost:8001 works
  • http://localhost:8001/application works
  • http://localhost:8001/application/ does not work
  • http://localhost:8001/application/add does not work

Does anyone know why this is happening?

AN 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 debugged a bit, and it turns out that the errors are generated by TemplateNormalizer , or rather HtmlParser.parse() . When I removed the <meta> tags from <head> , the errors did not disappear. But there was nothing else - the application did not show - only the <div class="app-loader"> displayed, although SystemJS loaded all the modules in the background ...

I also noticed that one of my services returned strange results, it turns out I used a relative URL. This led me to add <base href="/"> to the header and fix all the problems ... I'm not sure why, but these are provide(APP_BASE_HREF, { useValue: '/' }) seams provide(APP_BASE_HREF, { useValue: '/' }) from bootstrap.ts ignored in some places ...

+7
source share
3 answers

See also Angular 2 routers without basic href

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

Add the base element immediately after the <head> . If the app folder is the root of the application, as 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.

+4
source

change application application.route.ts to:

 @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 {...}
0
source

I worked on angle 5 and got this error because I passed the parameter to the click function, as for an iteration variable, which is wrong

  <td><a (click)="showReports({{row.site_id}})">{{row.site_name}}</a> </td>

so I solved it with

  <td><a (click)="showReports(row.site_id)">{{row.site_name}}</a> </td>
0
source

More articles:


All Articles