Как заставить <iron-icons> работать в Polymer 2.x

Question

Как заставить <iron-icons> работать в Polymer 2.x

Узкий вопрос

По устранению неполадок, я думаю, я сузил свою "большую проблему" до следующего вопроса. (Но я могу ошибаться.)

Как правильно загрузить последнюю версию <iron-icons> на мою локальную машину?

Под "последней версией" я подразумеваю версию, которая импортируется с помощью следующего:

<base href="//polygit.org/polymer+:master/components/">
<link rel="import" href="iron-icons/iron-icons.html">

Выше версия импорта <iron-icons> работает над моим демо здесь.

Однако, когда я делаю одно из следующего:

bower install --save PolymerElements/iron-icons

bower update --save

И попробуйте импортировать на моем локальном сервере, как это:

<link rel="import" href="/bower_components/iron-icons/iron-icons.html">

он молча терпит неудачу, и я не вижу значков вообще. Но я вижу дополнительное место, где иконки должны отображаться.

Большой вопрос (настоящая проблема, которую я пытаюсь решить)

Я пытаюсь получить <iron-icons> правильно отображать в браузере.

Что я ожидаю увидеть

Я ожидаю увидеть два <iron-icon> элементы как это:

(закрепленный между другими тестовыми элементами: Hello World а также <img>)

Что я на самом деле вижу

Иконок нет вообще. Но пустое место, где они должны сделать.

Действия по воспроизведению

Бежать

bower install --save PolymerElements/iron-icons

или если <iron-icons> уже установлено:

bower update --save

затем

polyserve

или же

polymer serve

Версия

Я считаю, что я использую v2.0.1 из <iron-icons>, Вот все содержимое файла bower.json.

bower.json

"iron-icons": "PolymerElements/iron-icons#^2.0.1",

конфигурация

ОС: macOS Sierra 10.12.6
Аппаратное обеспечение: MacBook Air
Браузер: версия Chrome 60.0.3112.113 (официальная сборка) (64-разрядная версия)

демонстрация

Вот мое демо Plunker.

Код

Следующий код делает <iron-icons> как и ожидалось:

http://plnkr.co/edit/pKnrlIbGhfQPFq10aAJS?p=preview

<base href="//polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="iron-icon/iron-icon.html">

<dom-module id="demo-el">
  <template>

    Hello world
    <iron-icon icon="add"></iron-icon>
    <iron-icon icon="favorite"></iron-icon>
    <img src="//lorempixel.com/400/200/" />

  </template>
  <script>
    class DemoEl extends Polymer.Element {
      static get is() {
        return 'demo-el'
      }

      constructor() {
        super();
      }

    }
    customElements.define(DemoEl.is, DemoEl);
  </script>
</dom-module>

Следующий код НЕ рендерит <iron-icons> как и ожидалось (обслуживается на месте):

<link rel="import" href="/bower_components/polymer/polymer-element.html">
<link rel="import" href="/bower_components/webcomponentsjs/webcomponents-lite.js">
<link rel="import" href="/bower_components/iron-icon/iron-icon.html">
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/bower_components/paper-input/paper-input.html">

<dom-module id="app-main">
  <template>

    Hello world
    <iron-icon icon="add"></iron-icon>
    <iron-icon icon="favorite"></iron-icon>
    <img src="//lorempixel.com/400/200/" />

  </template>
  <script>
    class AppMain extends Polymer.Element {
      static get is() {
        return 'app-main'
      }

      constructor() {
        super();
      }

    }
    customElements.define(AppMain.is, AppMain);
  </script>
</dom-module>

Тем не менее, приведенный выше код делает <iron-icons> как и ожидалось, когда я делаю прямую замену:

<base href="//polygit.org/polymer+:master/components/">
<link rel="import" href="iron-icons/iron-icons.html">

за

<link rel="import" href="/bower_components/iron-icons/iron-icons.html">

редактировать

Сравнивая текст импортируемых файлов с использованием CDN

<base href="//polygit.org/polymer+:master/components/">
<link rel="import" href="iron-icons/iron-icons.html">

и местный импорт:

<link rel="import" href="/bower_components/iron-icons/iron-icons.html">

Я обнаружил, что в импортированной версии iron-iconset-svg.html файл. Мой файл bower.json говорит, что зависимая версия "iron-iconset-svg": "1 - 2" или же "iron-iconset-svg": "polymerelements/iron-iconset-svg#^2.0.0" но файл bower.json здесь говорит, что зависимая версия "iron-iconset-svg": "polymerelements/iron-iconset-svg#^1.0.0"

Итак, теперь вопрос сводится к тому, как я могу получить локальную версию iron-icons.html импортировать ту же версию iron-iconset-svg.html как онлайн версия импорта CDN.

Редактировать 2

Проблема сохраняется, когда я просто копирую iron-iconset-svg.html файл из CDN и вставьте его в мою локальную файловую систему. Так что, очевидно, что-то еще происходит.

Редактировать 3

Я следовал инструкциям по обновлению до Polymer 2.0:

https://www.polymer-project.org/2.0/docs/upgrade

Удалите существующую папку bower_components.

rm -rf bower_components

Обновите версию Polymer в bower.json до последних версий.

Component            | Version
---------------------|--------
Polymer              | ^2.0.0
webcomponentsjs      | ^1.0.0
web-component-tester | ^6.0.0
Polymer elements     | ^2.0.0

Установите новые зависимости.

bower install

Это не решило проблему. Однако я не мог обновить Polymer elements в ^2.0.0

bower.json

"dependencies" : {
  ...
  "polymer-elements" : "^2.0.0",
  ...
}

вызвал ошибку и так сделал:

bower.json

"dependencies" : {
  ...
  "polymerelements" : "^2.0.0",
  ...
}

и так сделал:

bower.json

"dependencies" : {
  ...
  "PolymerElements" : "^2.0.0",
  ...
}

0

polymer polymer-2.x iron-elements

Источник

user1640892 14 сен '17 в 09:32

2 ответа

Решение

iron-icons это импорт утилиты, который включает в себя определение для iron-icon элемент, iron-iconset-svg элемент, а также импорт для набора иконок по умолчанию.

Это означает, что iron-icons напрямую зависит от обоих iron-icon а также iron-iconset-svg, И оба iron-icon а также iron-iconset-svg элемент зависит от iron-meta,

При обновлении iron-icons до последней версии, эти элементы iron-icon, iron-iconset-svg а также iron-meta может не обновляться, так как вы получите все эти компоненты по умолчанию. Итак, обновление iron-meta является одним из решений.

Также, когда вы устанавливаете или обновляете элемент в полимере, вы увидите сообщения вроде:

Не удается найти подходящую версию для железных иконок, пожалуйста, выберите одну из них, набрав одно из следующих чисел:

Всегда выбирайте подходящую или последнюю версию в зависимости от другого элемента, который у вас есть.

Когда вы закончите обновление или установку, вы увидите следующее примечание:

Please note that,
    iron-iconset-svg#a47e824859 depends on iron-meta#2.0-preview which resolved to iron-meta#7404b31da3
    iron-icon#1.0.13, iron-icon#1.0.13, iron-icon#1.0.13, iron-iconset-svg#1.1.2, iron-iconset-svg#1.1.2 depends on iron-meta#^1.0.0 which resolved to iron-meta#1.1.3
    iron-icon#2.0.0, iron-iconset-svg#2.0.0 depends on iron-meta#1 - 2 which resolved to iron-meta#2.0.2

Убедитесь, что вы прочитали это и установите / обновите необходимые зависимости.

Примечание: в моем случае мне пришлось обновить iron-selector а так как я использовал iron-icon внутри iron-selector,

1

Источник

user1724974 18 сен '17 в 23:01

Другие вопросы по тегам polymer polymer-2.x iron-elements

user3153669 18 сен '17 в 14:30 2017-09-18 14:30 · Accepted Answer · 2017-09-18 14:30

Решение, предложенное @Ofisora в комментариях, работает для меня - обновление iron-selector а также iron-meta:

bower install --save PolymerElements/iron-meta
bower install --save PolymerElements/iron-selector

3

Источник

user3153669 18 сен '17 в 14:30