Adding Polymer Element results in crash

Question

I like to use my custom Polymer Element named content-page in my main-html. Therefore I created a div with the id="contentcontainer" which contains my content-page. For some reason it crashes, just after clicking on Run and the Dart Editor says: . When I delete the line <link rel="import" href="content-page.html"> in main.html, the program isnt crashing, but there seems to be a Problem with the content of my main().

I unfortunately have no specific question, because I dont know where the error might be or where to start. Does someone see some suspicious parts in my code? Thanks for helping!

main.dart:

import 'dart:html';

void main() {
  var newElement = new Element.tag('content-page');

  querySelector('#contentcontainer').children.add(newElement);
}

main.html:

<!DOCTYPE html>

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="application/dart" src="main.dart"></script>
    <script src="packages/web_components/dart_support.js"></script>
    <link rel="import" href="content-page.html">
</head>

<body>
  <div id="contentcontainer">
    <content-page id="contentpage"></content-page>
  </div>
  <script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
</html>

content-page.dart:

import 'package:polymer/polymer.dart';
import 'dart:html';

@CustomTag('content-page')
class ContentPage extends PolymerElement {

  ContentPage.created() : super.created();
}

content-page.html:

<link rel="import" href="../packages/polymer/polymer.html">
<polymer-element name="content-page" >

  <template>
    <div>
      ContentPage-Content
    </div>
  </template>

  <script type="application/dart" src="content-page.dart"></script>

</polymer-element>

Please don't use the title of your post for tagging it. – Burhan Khalid Sep 20 '14 at 16:42 — Burhan Khalid, Sep 20 '14 at 16:42

score 2 · Accepted Answer · answered Sep 19 '14 at 10:17

2

I tried your code and it's ok. Have you added the transformers to your pubspec.yaml?

name: sample
description: A sample web application
dependencies:
  browser: any
  polymer: any
transformers:
- polymer

answered Sep 19 '14 at 10:17

GioLaq

2,489
21
26

Thanks, it is working now! I did not add transformers: - polymer. While using this website as reference: https://www.dartlang.org/polymer/ I read over this part accidentally. – moobi Sep 19 '14 at 10:25
There still was an issue with the other code in my main(), which seems to bot get executed. So I also had to use @Günter Zöchbauer's answer – moobi Sep 19 '14 at 12:47

score 1 · Answer 2 · edited May 23 '17 at 12:29

1

You should have a look at this question/answer: how to implement a main function in polymer apps how to use a custom main method in a Polymer project.
This line should contain your file containing your main method (see also the answer in the linked question):

<script type="application/dart">export 'package:polymer/init.dart';</script>

this line is then redundant

<script type="application/dart" src="main.dart"></script>

the transformer configuration also needs a list of entry pages if you don't use the latest Polymer version

transformers:

- polymer:
    entry_points:
    - web/index.html

edited May 23 '17 at 12:29

Community

1
1

answered Sep 19 '14 at 10:35

Günter Zöchbauer

623,577
216
2,003
1,567

When I use the content-page isnt visible. – moobi Sep 19 '14 at 11:00
Because your main method is incomplete, see linked question/answer. – Günter Zöchbauer Sep 19 '14 at 11:01
AND when I use - polymer: entry_points: - web/polymer/core_drawer_panel/index.html dart editor says – moobi Sep 19 '14 at 11:01
If it worked without the `entry_points` setting in `pubspec.yaml` then you have probably a version where this isn't necessary anymore but the crash shows that there is still something wrong with your code because my Polymer apps don't crash and I have the `entry_points` still listed without problems. – Günter Zöchbauer Sep 19 '14 at 11:04
I am now using your suggested improvements including the lines of code from your linked answer. But not the "entry_points"-suggestion. – moobi Sep 19 '14 at 12:45
It is working, thanks for help! Your pubspec.yaml looks correct, but for my project only @JoaoBiriba's pubspec is working. – moobi Sep 19 '14 at 14:41
I misinterpreted the CHANGELOG.md. The entry_points don't need to be listed in `build.dart` but still in `pubspec.yaml`. – Günter Zöchbauer Sep 20 '14 at 16:42

Adding Polymer Element results in crash

2 Answers2