Dynamically import template in Dart Polymer - Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Nodes of type 'HTML' may not be inserted inside nodes of type '#document' #22125
Comments
|
Does it work if you remove the polymer import from your imported file (leaving only the one on your homepage)? This will give you a warning today, but it should work still as long as you are importing polymer somewhere. In general though, dynamically injecting html imports is not well supported today in dart. You can't have any dart files in them (or they won't be loaded at least). |
|
This comment was originally written by @pjjjv By design, removing the polymer on the index.html shouldn't work, because there is that app-router Polymer custom element that is doing the dynamic importing in the first place. It's good to know it's not well supported. I'll have a look at other methods for lazy loading then that have been demonstrated with dart. |
|
Sorry I wasn't clear, I meant leaving the polymer import in your index.html, but removing it everywhere else. That should work properly even though it breaks convention. |
|
This comment was originally written by @pjjjv Thanks again. I think that is what I described in the issue, right? It works, but has its limitations. Anyway, I found #17873 through the code doc on Polymer.import() and that seems what I need. Either that or a better error message here. You may close/mark-duplicate. |
|
Oh whoops, I misread the original post. I presume that the primary issue here is that during the build process we inline html imports. This breaks the automatic deduplication that you usually get with html imports. For dart alone this is actually not an issue because of how dart imports work, but for javascript it is (since it just executes immediately anything that is seen). Basically, we need some way of informing the browser (and polyfill) that we have already inlined some imports. |
|
This comment was originally written by @jonaskello Nice to see that someone is working on a dart port of app-router. |
DartBot
added
Type-Defect
area-pkg
|
This issue has been moved to dart-archive/polymer-dart#352. |
This issue was originally filed by @pjjjv
What steps will reproduce the problem?
When imperatively adding a new import link (to a second html page) to the header of a index.html, and then appending the TemplateElement from the second html page as child to a node in the index.html, a HierarchyRequestError occurs when both the index.html and the second html page have a Polymer import.
The index.html is roughly:
<html>
<head>
<!--<script src="packages/web_components/platform.js"></script>
<script src="packages/web_components/dart_support.js"></script>-->
<link rel="import" href="packages/polymer/polymer.html"><!-- more imports -->
</head>
<body unresolved>
<app-router mode="hash">
<app-route path="/" imp="packages/app_router_dart_test/pages/home-page.html" template></app-route>
</app-router>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
</html>
The app_router.dart does:
document.head.append(importLink);
which effectively adds something like this in the above <head></head> tag:
<link rel="import" href="packages/app_router_dart_test/pages/home-page.html">
This home-page.html contains no <html> tag, but basically only a template and inside:
<link rel="import" href="../../../packages/polymer/polymer.html">
<template>
<div><!-- stuff inside --></div>
</template>
Then app_router.dart also adds the above template into a node in index.html:
router.activeRoute.append(element);
Effectively you get this:
<app-route path="/" imp="packages/app_router_dart_test/pages/home-page.html" template>
<div><!-- stuff inside --></div>
</app-route>
What is the expected output? What do you see instead?
If the polymer import (<link rel="import" href="../../../packages/polymer/polymer.html">) at the top of home-page.html is removed, this works. If it stays there (it is needed for custom element definitions at deeper levels), then you get an error:
Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Nodes of type 'HTML' may not be inserted inside nodes of type '#document'. (http://localhost:8080/packages/polymer/src/js/polymer/polymer.min.js:13)
Code can be browsed at (but I don't suggest to try to build it yet; perhaps I can make a smaller version):
https://github.com/pjjjv/app-router-dart-test/tree/f0d362935c4754c529844e6dfe88dedde5b0ec4a
The only import I see double on the Network tab in the dev console is /packages/polymer/src/js/polymer/polymer.min.js, but I am not sure where this comes from.
There are plenty of reports surrounding this cryptic error, notably http://stackoverflow.com/questions/25918498/dynamically-import-html-template-in-dart-polymer.
I wonder if Polymer.Dart should not be more robust here, and if, really, it involves two duplicates being imported, the framework should not detect this and avoid it better.
dart 1.8.3
polymer 0.15.5
The text was updated successfully, but these errors were encountered: