CODEWITHSUNDEEP
dartdart-polymerdart-html
Jan Vladimir Mostert
Jan Vladimir Mostert

Reputation: 12972

Breaking on exception: type 'HtmlElement' is not a subtype of type

I've seen plenty of other similar errors, but I'm not sure if they are related or not. I'm basically trying to dynamically create polymer components and add them to the existing page, once that is working, I want to create my own Polymer components and dynamically add / remove them to and from the page.

pubspec.yaml:

name: alm
description: alm
dependencies:
  browser: any
  polymer: ">0.15.3"
  paper_elements: any
transformers:
- polymer:
    entry_points:
      - web/index.html

index.html: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>  
    <link rel="import" href="packages/paper_elements/paper_button.html">    
  </head>
  <body unresolved>   
    <script type="application/dart" src="index.dart"></script>    

    <paper-button raised class="colored">colored</paper-button>
    <paper-button raised disabled>disabled</paper-button>

    <div id="more-buttons"></div>

    <script src="packages/browser/dart.js"></script>
  </body>
</html>

index.dart:

import 'dart:html';
import 'package:polymer/polymer.dart';
import 'package:paper_elements/paper_input.dart';
void main(){

  initPolymer().run(() {
    Polymer.onReady.then((_) {     
      DivElement div =   querySelector("#more-buttons");
      div.appendText("text 1 2 3");
      PaperInput pinput = new PaperInput.created();
      div.append(pinput);      
    });
  });

}

The exception I'm getting:

Breaking on exception: type 'HtmlElement' is not a subtype of type 'PaperInput' of 'function result'.

If I try using the Element object:

  Element y = new Element.tag('paper-input');
  div.append(y);

Breaking on exception: type 'HtmlElement' is not a subtype of type 'PaperInput' of 'function result'.

Exception: type 'HtmlElement' is not a subtype of type 'PaperInput' of 'function result'. (package:paper_elements/paper_input.dart:40)

I'm also curious why everything is so massive:

enter image description here

I'm using the standard dart editor and click run in Dartium to run the application.

Update:

I've updated the code, getting different errors now. Had to update the polymer version in pubspec.yaml, any was causing errors.

Browser Console:

Failed to load resource: the server responded with a status of 404 (Not Found)
  http://localhost:8080/packages/web_components/webcomponents.js
Failed to load resource: the server responded with a status of 404 (Not Found)
  http://localhost:8080/packages/web_components/interop_support.html
Failed to load resource: the server responded with a status of 404 (Not Found)
  http://localhost:8080/packages/custom_element_apigen/src/common.dart
An error occurred loading file: package:custom_element_apigen/src/common.dart

What I'm seeing now is a brief flash of the buttons followed by a white screen.

Tools output is giving me the following error:

Resolving dependencies...
Got dependencies!


--- 6:10:00 PM Starting pub serve : ______ ---
Loading source assets...
Loading polymer transformers...
Serving alm web on http://localhost:8080
[Warning from ImportInliner on alm|web/index.html]:
line 10, column 1 of package:paper_elements/src/polymer/polymer.html: Failed to inline HTML import: Could not find asset web_components|lib/interop_support.html.
null. See http://goo.gl/5HPeuP#polymer_25 for details.
<link rel="import" href="../../../../packages/web_components/interop_support.html">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Build completed successfully

Looking at the suggested link:

Error while inlining an import
An error occurred while inlining an import in the polymer build. This is often the result of a broken HTML import.

I can't really see what could be wrong with my index.html and that import I can see under the paper_elements package.

Update2:

Updated version of polymer to >0.15.3 and also ran pub upgrade and pub cache repair now seeing a different exception:

Exception: Uncaught Error: created called outside of custom element creation.
Stack Trace:
#0      Blink_Utils.initializeCustomElement (dart:_blink:31040)
#1      _Utils.initializeCustomElement (dart:html:41640)
#2      _initializeCustomElement (dart:html:41835)
#3      Element.Element.created (dart:html:11675)
#4      HtmlElement.HtmlElement.created (dart:html:17615)
#5      HtmlElement&DomProxyMixin.HtmlElement&DomProxyMixin.created (package:paper_elements/paper_input.dart:4:1)
#6      HtmlElement&DomProxyMixin&PolymerProxyMixin.HtmlElement&DomProxyMixin&PolymerProxyMixin.created (package:paper_elements/paper_input.dart:4:1)
#7      PaperInput.PaperInput.created (package:paper_elements/paper_input.dart:39:26)
#8      main.<anonymous closure>.<anonymous closure> (http://localhost:8080/index.dart:12:31)
#9      _RootZone.runUnary (dart:async/zone.dart:1155)
#10     _Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:484)
#11     _Future._propagateToListeners (dart:async/future_impl.dart:567)
#12     _Future._completeWithValue (dart:async/future_impl.dart:358)
#13     _Future._asyncComplete.<anonymous closure> (dart:async/future_impl.dart:412)
#14     _asyncRunCallbackLoop (dart:async/schedule_microtask.dart:41)
#15     _asyncRunCallback (dart:async/schedule_microtask.dart:48)
#16     _handleMutation (dart:html:41819)

Seems to work fine for paper-button, button actually displays:

  PaperButton y = new PaperButton();
  y.text = "KOTS";
  y.raised = true;
  div.append(y);

Maybe a bug in paper-element, will investigate and log a bug if needed.

Upvotes: 0

Views: 741

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657308

The tranformer config misses the entry_page setting and the custom main method is incomplete for polymer apps (see https://stackoverflow.com/a/20982658/217408)
Sorry for the short answer, I'm on my phone.

Upvotes: 1

Related Questions