Веб-компонент обсуждался некоторое время, и с помощью полифила webcomponentsjs из проекта полимера разработчики наконец-то могут воспользоваться преимуществами этого мощного инструмента. Поскольку стандарт не зависит от фреймворков, компоненты могут использоваться в любой архитектуре и предлагают простой вариант интеграции компонентов в ваш проект. Но как можно использовать веб-компоненты в проекте Angular 6?
В целом существует два способа определения и распространения веб-компонентов: как файлы JavaScript или как входные данные HTML. Доступно несколько руководств, объясняющих, как использовать JavaScript-файлы в Angular (у Брайана Форбса из Sitepen есть отличный учебник Использование веб-компонентов с Angular), однако интеграция веб-компонентов из HTML-файлов все еще немного хакерская.
В этой статье я представляю, как мне удалось импортировать веб-компонент в мои проекты Angular. В примере приложения используется веб-компонент google-map с веб-сайта webcomponents.org.
TL;DR Поскольку Angular не поддерживает импорт HTML, решение состоит в том, чтобы добавить полифил и веб-компонент, доступные в ресурсах, и загрузить два ресурса в index.html.
Прежде чем мы сможем начать, нам нужно создать новый проект angular с помощью Angular CLI.
ng new sample-google-map-project
Добавьте зависимости беседки
Поскольку большинство веб-компонентов, похоже, распространяются с помощью bower, нам нужно будет добавить менеджер пакетов в проект. Используйте npm, чтобы добавить его в зависимости проекта. Мы добавляем Bower только локально, так как я не очень часто использую Bower. Если вы хотите установить Bower глобально, добавьте в команду -g.
npm install --save bower
Bower сохраняет зависимости проекта в файле bower.json. Чтобы сгенерировать такой файл, используйте команду инициализации Bower и следуйте инструкциям.
./node_modules/.bin/bower init
Поскольку Angular использует npm для управления своими зависимостями, установка для разработчиков обычно ограничивается простой установкой npm, которая запускает npm для установки всех зависимостей. Чтобы сохранить эту функциональность в Bower, нам нужно добавить скрипт postinstall в package.json. Сценарий постустановки вызывается npm после завершения команды установки. Мы будем использовать этот скрипт, чтобы заставить Bower установить зависимости, перечисленные в файле bower.json.
"postinstall": "./node_modules/.bin/bower install"
Теперь мы можем использовать Bower для загрузки файлов для полифила webcomponentsjs и веб-компонента google-map. Исходники будут сохранены в каталоге bower_components.
./node_modules/.bin/bower install --save google-map ./node_modules/.bin/bower install --save webcomponentsjs
Добавьте Bower_components в активы
Если мы посмотрим на файловую структуру в bower_components/google-map, мы увидим, что файлы, содержащие веб-компонент, находятся в google-map.html. Этот файл необходимо импортировать в проект с помощью импорта HTML. К сожалению, Angular пока не поддерживает импорт HTML. Поэтому импорт необходимо реализовать за пределами angular.
В .angular-cli.json нам нужно добавить каталог bower_components к ресурсам, чтобы получить доступ к файлам из index.html. Однако по умолчанию корневой каталог установлен в каталог src, и кли не позволяет ссылаться на файлы за пределами корневого каталога. Поэтому нам нужно изменить корень проекта на корневой каталог.
Это повлияет на все пути к файлам приложения. Поэтому все пути должны быть обновлены.
"apps": [
{
"root": "",
"outDir": "dist",
"assets": [
{ "glob": "**/*", "input": "src/assets/", "output": "assets/" },
{ "glob": "favicon.ico", "input": "src", "output": "" },
"bower_components"
],
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"test": "src/test.ts",
"tsconfig": "src/tsconfig.app.json",
"testTsconfig": "src/tsconfig.spec.json",
"prefix": "app",
"styles": [
"src/styles.css"
],
"scripts": [],
"environmentSource": "src/environments/environment.ts",
"environments": {
"dev": "src/environments/environment.ts",
"prod": "src/environments/environment.prod.ts"
}
}
],
В приведенном выше angular-cli.json массив assets содержит все файлы, которые копируются в каталог dist как есть. Здесь мы добавили каталог bower_components, чтобы получить доступ к веб-компонентам, загруженным через Bower. Каталог активов и favicon.ico были заменены объектом, который отображает пути ввода и пути вывода. Это необходимо для сохранения исходной структуры URL-адресов этих ресурсов.
Если вы работаете над реальным проектом или проектом с несколькими зависимостями от Bower, я рекомендую только добавлять файлы, которые вам нужны, в ресурсы, а не весь каталог bower_components
Если вы все сделали правильно, эта ссылка должна вернуть файл bower веб-компонента google-map
зарегистрироваться CUSTOM_ELEMENTS_SCHEMA
Чтобы Angular cli регистрировал веб-компоненты как действительные компоненты, нам нужно добавить регистр CUSTOM_ELEMENTS_SCHEMA в модуль нашего приложения.
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
/* ... */
schemas:[
CUSTOM_ELEMENTS_SCHEMA
]
})
Импортировать веб-компонент google-map
После того, как мы все настроили, теперь мы можем получить доступ ко всем файлам в папке Bower_components. Чтобы загрузить веб-компонент google-map, используйте импорт HTML в файле index.html.
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="bower_components/google-map/google-map.html">
Используйте веб-компонент
Теперь, когда все настроено, мы можем использовать компонент google-map в нашем проекте. Просто добавьте тег в свой app.component.html и добавьте стиль, чтобы придать ему размер (иначе он может не отображаться).
<style>
google-map{
width: 300px;
height: 300px
}
</style>
<google-map></google-map>
Спасибо, что прочитали мою статью. Я надеюсь, что вы нашли этот урок полезным. Это мой первый пост здесь на Medium, и я буду рад обратной связи. Или, если вы знаете более элегантное решение по интеграции веб-компонентов, поделитесь им.
