Интеграция Angular 7 с проблемой StencilJS - Не удается найти модуль 'test-components/dist/loader'

Question

Я пытаюсь интегрировать свой проект Angular 7 с StencilJS, чтобы я мог использовать пользовательские веб-компоненты / элементы, и я следую руководству по интеграции на веб-сайте StencilJS здесь.

Я на инструкции, которые говорят:

Коллекция компонентов, созданная с помощью Stencil, включает в себя основную функцию, которая используется для загрузки компонентов в коллекцию. Эта функция называется defineCustomElements() и он должен быть вызван один раз во время начальной загрузки вашего приложения. Одним из удобных мест для этого является main.ts в качестве таких:

Я пытался импортировать defineCustomElements() в моем main.ts файл следующим образом:

Но я получаю следующую ошибку:

[ts] Cannot find module 'test-components/dist/loader'

Нужно ли устанавливать этот модуль, используя npm install?

Если так, то почему руководство не включает эту инструкцию?

Answer 1

Вот как я это сделал:

$ npm я в соцсетях

$ В модуле приложения / функциональном модуле в вашем приложении добавьте CUSTOM_ELEMENTS_SCHEMA:

@NgModule({
  imports: [
   .........
  ],
  schemas:[CUSTOM_ELEMENTS_SCHEMA]
})

Тогда наконец в main.ts

import { defineCustomElements } from 'web-social-share/dist/loader';
.....
defineCustomElements(window);

Answer 2

Я столкнулся с той же ошибкой.

Для меня я опубликовал свой трафаретный веб-компонент в npm, а затем установил его в свой проект.

У меня был тот же "Не удается найти модуль", когда я забыл запустить npm run build до npm publish,

Answer 3

Stencil еще не поддерживает импорт отдельных компонентов модулем ES2015, что означает, что мы должны сконфигурировать CLI для копирования всех статических файлов JavaScript для использования во время выполнения.

В.angular-cli.json вам нужно добавить объект конфигурации в настройки ресурсов

"assets": [
  "assets",
  "favicon.ico",
  { "glob": "**/*", "input": "../node_modules/stencil-demos/dist", "output": "./assets/stencil-demos" }
]

Проверьте эту статью для того, чтобы настроить: https://coryrylan.com/blog/using-stencil-web-components-in-angular-and-the-angular-cli

Answer 4

@Kingamere Да, вам нужно сначала установить веб-компонент в вашем проекте. Шаги для интеграции трафаретной веб-компоненты должны быть следующими:

1. Установить компонент в угловом проекте (npm install <module-name>)
2. Включить пользовательскую схему элемента в app.module.ts (schemas: [CUSTOM_ELEMENTS_SCHEMA])
3. компонент импорта в app.component.ts (import * as <name> from 'test-components/dist/loader';)
4. Зарегистрировать компонент в реестре (<name>.defineCustomElements(window);)
5. Используйте селектор вашего трафаретного компонента, где вы хотите в своем проекте