2
votes

Intégration Angular 7 avec problème StencilJS - Impossible de trouver le module 'test-components / dist / loader'

J'essaie d'intégrer mon projet Angular 7 avec StencilJS pour pouvoir utiliser des composants / éléments Web personnalisés, et je suis le guide d'intégration sur le site Web de StencilJS ici .

Je suis sur les instructions qui disent:

Une collection de composants construite avec Stencil comprend une fonction principale qui est utilisé pour charger les composants dans la collection. Cette fonction s'appelle defineCustomElements () et doit être appelé une fois pendant le bootstrap de votre application. Un endroit pratique pour faire cela est dans main.ts en tant que tel:

J'ai essayé d'importer defineCustomElements () dans mon fichier main.ts comme suit:

Mais j'obtiens l'erreur suivante:

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

angular angular7 stenciljs

1 commentaires

Comment distribuez-vous votre module test-components ? c'est-à-dire que vous l'avez publié sur npm et l'avez-vous installé dans votre projet Angular? stenciljs.com/docs/…

3 Réponses :

-1
votes

@Kingamere Oui, vous devez d'abord installer le composant Web dans votre projet. Les étapes pour intégrer un composant Web stencil doivent être les suivantes:

Installer le composant dans un projet angulaire ( npm install )
Activer le schéma d'élément personnalisé dans app.module.ts ( schémas: [CUSTOM_ELEMENTS_SCHEMA] )
importer le composant dans app.component.ts ( importer * comme depuis 'test-components / dist / loader';)
Enregistrer le composant dans le registre ( .defineCustomElements (window); )
Utilisez le sélecteur de votre composant de pochoir où vous le souhaitez dans votre projet

0 commentaires

0
votes

J'ai rencontré la même erreur.

Pour moi, je publiais mon composant Web stencil sur npm, puis je l'installais dans mon projet.

J'ai eu le même "module introuvable" lorsque j'ai oublié d'exécuter npm run build avant npm publish .

0 commentaires

1
votes

Voici comment je l'ai fait:

$ npm i web-social-share

$ Dans le module d'application / module de fonctionnalité de votre application, ajoutez CUSTOM_ELEMENTS_SCHEMA:

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

Puis enfin dans main.ts

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

0 commentaires