Poylmer app shell and lazy loading

Question

I have a projet setup similar to the Polymer shop-app. To reduce thr code base in the app itself, I splitted the hole main page layout into an separete element project. The project has an element Layout which loads 7 of its Dependencys lazy:

_pageLoaded: function (shouldResetLayout) {
            this._ensureLazyLoaded();
...
}
 _ensureLazyLoaded: function () {
      if (!this.loadComplete) {
       Polymer.RenderStatus.afterNextRender(this, function () {
           this.importHref(this.resolveUrl('lazy-resources.html'), function () {
                        this.loadComplete = true;
                    }, null, true);
       });
     }
 },

Basically the same logic as the Shop-app exmaple._pageLoaded is an observer of the two-way data bound page property of my Shop-app.

In my Shop-app itself, I include the layout element like so:

<link rel="import" href="../bower_components/lc-app-layout/lc-app-layout.html">

<lc-app-layout categories="[[categories]]" page="[[page]]" category-name="{{categoryName}}">
        <iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible">
            <!-- home view -->
            <shop-home name="home" categories="[[categories]]"></shop-home>
            <!-- list view of items in a category -->
            <shop-list name="list" route="[[subroute]]" offline="[[offline]]" query-Params="[[queryParams]]"></shop-list>
            <!-- detail view of one item -->
            <shop-detail name="detail" route="[[subroute]]" offline="[[offline]]"></shop-detail>
        </iron-pages>
    </lc-app-layout>

And also have some lazy ressources in the app itself, which are loaded the same way as in the layout.

Now when I want to build everythin, I need to add the lazy-resurces of the layout element as an fragment to the Polymer.json so that the analyser will find the it's dependencys:

"fragments": [
"src/view/list/shop-list.html",
"src/view/detail/shop-detail.html",
"src/lazy-resources.html",
"bower_components/lc-app-layout/lazy-resources.html"

No when I serve this build, the page doesn't load most of the times. It shows error like:

Cannot read property '_makeReady' of undefined
Polymer is not a function
Cannot read property 'isDescendant' of undefined

When I throttle the network speed, chances are higher that everythin will load up. So I assume there is some timing issue in the asynchronous ImportHref or something like that. Or am I just missusing the fragments to tell the analyzer to scan my laczy resources of the layout element?

I'm using Polymer-CLI 0.18.0. Runnig the app with polymer serve does work as intended.

triGun triGun · Accepted Answer · 2017-04-16T21:29:17

Solved the problem by moving the lazy loading from layout element to the lazy-ressource of the Shop-app.

Poylmer app shell and lazy loading

1 Answers