Polymer 应用程序外壳和延迟加载答案

【问题标题】：Poylmer app shell and lazy loadingPolymer 应用程序外壳和延迟加载
【发布时间】：2017-04-15 14:00:23
【问题描述】：

我有一个类似于 Polymer 商店应用程序的项目设置。为了减少应用程序本身的代码库，我将主页面布局拆分为一个单独的元素项目。该项目有一个元素Layout，它加载了它的7个依赖项惰性：

_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);
       });
     }
 },

基本上和Shop-app例子的逻辑一样。_pageLoaded是我Shop-app的双向数据绑定页面属性的观察者。

在我的 Shop-app 本身中，我包含 layout 元素，如下所示：

<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>

应用本身也有一些惰性资源，加载方式与layout相同。

现在，当我想构建所有内容时，我需要将layout 元素的lazy-resurces 作为片段添加到Polymer.json，以便分析器找到它的依赖项：

"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"

不，当我提供此版本时，页面大部分时间都不会加载。它显示如下错误：

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

当我限制网络速度时，一切都会加载的机会更高。所以我认为异步 ImportHref 或类似的东西存在一些时间问题。还是我只是错过了使用片段来告诉分析器扫描我的 layout 元素的懒惰资源？

我正在使用 Polymer-CLI 0.18.0。使用polymer serve 运行应用程序确实可以正常工作。

【问题讨论】：

标签： polymer

【解决方案1】：

通过将延迟加载从 layout 元素移动到 Shop-app 的延迟资源来解决问题。

【讨论】：