lazy-imports-mixin - Error: No imports found in the specified group

Question

Experimenting with Polymer 2 and using the sample app from polymer cli, I replaced the Polymer.importHref with the lazy import mixin. However, it complains Error: No imports found in the specified group..

It looks pretty cut and dry, but am I doing something wrong?

   <link rel="import" href="../bower_components/lazy-imports/lazy-imports-
    mixin.html">

   <link rel="lazy-import" group="lazy" href="foo-element.html">

---

  <script>
    class MyApp extends Polymer.LazyImportsMixin(Polymer.Element) {
      static get is() { return 'my-app'; }

      static get properties() {
        return {
          page: {
            type: String,
            reflectToAttribute: true,
            observer: '_pageChanged',
          },
          routeData: Object,
          subroute: String,
          // This shouldn't be neccessary, but the Analyzer isn't picking up
          // Polymer.Element#rootPath
          rootPath: String,
        };
      }

      static get observers() {
        return [
          '_routePageChanged(routeData.page)',
        ];
      }

      _routePageChanged(page) {
        // If no page was found in the route data, page will be an empty string.
        // Default to 'view1' in that case.
        this.page = page || 'fooElement';

        // Close a non-persistent drawer when the page & route are changed.
        if (!this.$.drawer.persistent) {
          this.$.drawer.close();
        }
      }

      _pageChanged(page) {
        this.importLazyGroup('lazy').then((results) => {
        })
        .catch(e => console.log(e));
      }

Answer 1

Your lazy import group should be after dom-module but before template. Something like :

<dom-module id="my-app">
  <link rel="lazy-import" group="lazy" href="foo-element.html">
  <template>
  ...