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

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

0 голосов
/ 31 января 2019

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

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

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

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

enter image description here

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

enter image description here

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

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

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

Ответы [ 4 ]

0 голосов
/ 13 августа 2019

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

$ npm i web-social-share

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

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

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

import { defineCustomElements } from 'web-social-share/dist/loader';
.....
defineCustomElements(window);
0 голосов
/ 02 мая 2019

@ 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. Использование селектора компонента трафарета в любом месте, где вы хотитев вашем проекте
0 голосов
/ 23 июля 2019

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

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

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

0 голосов
/ 31 января 2019

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

...