title: Error after compiling Polymer Dart to JS. (The "smoke" library has not been configured)
body: <p>Аfter compiling Dart code (which use Dart Polymer) to JS. I get the following error: </p>
  
  <pre><code>Uncaught Exception: The "smoke" library has not been configured.
  Make sure you import and configure one of the implementations
  (package:smoke/mirrors.dart or package:smoke/static.dart).
  </code></pre>
  
  <p>Sometimes the message was:</p>
  
  <pre><code>No elements registered in a while, but still waiting on 1 element to be registered. Check that you have a class with an @CustomTag annotation for each of the following tags: 'app-element'
  </code></pre>
  
  <p>What's wrong here? Here is my code:</p>
  
  <p><strong>UPDATE</strong>: now code beyond is improved and work correctly after <code>pub build</code>. I change folder/file structure and update polymer to the latest version.</p>
  
  <p><strong>pubspec.yaml</strong></p>
  
  <pre><code>name: app
  dependencies:
    browser: any
    #do not forget update to latest version by running pub update 
    polymer: any
  transformers:
  - polymer:
      entry_points:
      - web/main.html
  </code></pre>
  
  
  
  <p><strong>web/templates/ui-elements.html</strong></p>
  
  <pre class="lang-dart prettyprint-override"><code>&lt;polymer-element name="app-globals"&gt;&lt;/polymer-element&gt;
  
  &lt;polymer-element name="app-element"&gt;
    &lt;template&gt;
      &lt;link rel="stylesheet" href="/main.css"/&gt;
      &lt;content&gt;&lt;/content&gt;
    &lt;/template&gt;
    &lt;script type="application/dart" src="ui-elements.dart"&gt;&lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>
  
  <p><strong>web/templates/ui-elements.dart</strong></p>
  
  <pre class="lang-dart prettyprint-override"><code>@CustomTag('app-globals')
  class AppGlobals extends PolymerElement{
    AppGlobals.created() : super.created();
  }
  
  @CustomTag('app-element')
  class AppElement extends PolymerElement {
    AppElement.created() : super.created();
  }
  </code></pre>
  
  <p><strong>web/main.html</strong> (dummy entry file)</p>
  
  <pre class="lang-dart prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;app-element&gt;&lt;/app-element&gt;
      &lt;script type="application/dart" src="main.dart"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>web/main.dart</strong></p>
  
  <pre class="lang-dart prettyprint-override"><code>import 'package:polymer/polymer.dart';
  
  main() {
    initPolymer();
  }
  
  @whenPolymerReady
  void onReady() {
  }
  </code></pre>
  
  <p><strong>web/main.html</strong> (entry point) after <code>pub build</code>. Real mess after compiling. So many js files some of them takes size even more than 300kb.</p>
  
  <pre class="lang-dart prettyprint-override"><code>&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;script src="packages/web_components/webcomponents.min.js"&gt;&lt;/script&gt;&lt;script src="packages/web_components/dart_support.js"&gt;&lt;/script&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
    &lt;/head&gt;
    &lt;body&gt;&lt;div hidden=""&gt;&lt;style shim-shadowdom=""&gt;
  /*******************************
            Flex Layout
  *******************************/
  
  html /deep/ [layout][horizontal], html /deep/ [layout][vertical] {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  }
  
  html /deep/ [layout][horizontal][inline], html /deep/ [layout][vertical][inline] {
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
  }
  
  ......tons of other styles...........
  
  &lt;/style&gt;
  
  &lt;script src="packages/polymer/src/js/polymer/polymer.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  // TODO(sigmund): remove this script tag (dartbug.com/19650). This empty
  // script tag is necessary to work around a bug in Chrome 36.
  &lt;/script&gt;
  
  &lt;!-- unminified for debugging:
  &lt;link rel="import" href="src/js/polymer/layout.html"&gt;
  &lt;script src="src/js/polymer/polymer.js"&gt;&lt;/script&gt;
  --&gt;
  &lt;polymer-element name="app-globals"&gt;&lt;/polymer-element&gt;
  
  &lt;!-- APP ELEMENT --&gt;
  &lt;polymer-element name="app-element" class="bck-medusa w-100 h-100"&gt;
    &lt;template&gt;
      &lt;link rel="stylesheet" href="../main.css"&gt;
      &lt;content&gt;&lt;/content&gt;
    &lt;/template&gt;
  &lt;/polymer-element&gt;
  &lt;/div&gt;
      &lt;script src="main.html.polymer.bootstrap.dart.js" async=""&gt;&lt;/script&gt;
  
  
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>