Это можно сделать двумя способами:
- Опубликуйте свой компонент трафарета в npm и используйте его в своем приложении Angular, установив его: этот вариант подходит, когда вы закончили финальную версию своего веб-компонента и готовы напрямую использовать его. («Как опубликовать компонент трафарета в npm» будет рассмотрено в следующем разделе этой серии. Следите за новостями !!)
- Связывание вашего веб-компонента Stencil в вашем приложении Angular: этот параметр в основном используется в режиме разработки, и это то, что мы собираемся рассмотреть в этой статье.
Создание приложения Angular:
Создайте папку, в которой будут находиться ваше приложение Angular и стартовый набор веб-компонентов Stencil. Это будет выглядеть примерно так:
Создайте приложение angular, запустив его в папке «New Project»:
ng new my-angular-app
Создание веб-компонентов трафаретов:
Выполните действия, описанные в этой статье, чтобы создать начальный проект веб-компонентов трафарета.
Связывание компонента трафарета с приложением Angular:
- Перейдите в папку «my-first-stencil-component» и запустите веб-компоненты трафарета в режиме просмотра с помощью следующей команды:
stencil build --watch
Эта команда создаст ваши компоненты (в папке dist) в режиме просмотра, так что ваши последние изменения в исходном файле веб-компонента (как и при сохранении файла) будут приняты вашим приложением angular.
2. Перейдите в свое приложение Angular,
2.1. В «app.module.ts» импортируйте «CUSTOM_ELEMENTS_SCHEMA», как показано ниже:
2.2. В main.ts импортируйте «defineCustomElements», как показано ниже:
2.3. В терминале перейдите в папку приложения Angular, запустите
npm link ../my-first-stencil-component/dist
Что делает «ссылка npm»? Он создает символическую ссылку в глобальной папке, которая ссылается на пакет, в котором была выполнена команда npm link.
2.4. В app.component.html используйте свой собственный веб-компонент, как показано на изображении ниже,
2.5. В приложении Angular запустите приложение с помощью:
ng serve.
Перейдите к « http: // localhost: 4200 ».
Вы сможете увидеть свой веб-компонент Stencil, как показано ниже:
Примечание. Если это не сработает, перейдите в проект трафарета,
- ›остановить команду« Построение трафарета - смотреть ».
- ›скопируйте файл package.json из проекта трафарета и вставьте в папку dist.
- ›затем выполните шаг ссылки npm, как описано выше в пункте 2.3. Шаги 2.1 и 2.2 останутся прежними.
- ›затем запустите команду« stencil build - watch », чтобы увидеть свои изменения.
Это сделано потому, что для работы npm link требуется package.json.
Использованная литература:
- Официальная документация по трафарету (https://stenciljs.com/)
- Официальная документация Angular (https://angular.io/)
- Https://docs.npmjs.com/cli/link
Следующая статья:
- Опубликуйте свой веб-компонент Stencil в npm (Скоро !!)
