Angular 7与StencilJS集成问题-找不到模块'test-components / dist / loader'

Question

我正在尝试将Angular 7项目与StencilJS集成在一起，以便可以使用自定义Web组件/元素，而且我正在遵循StencilJS网站here上的集成指南。

我在指示以下内容：

  

使用Stencil构建的组件集合包括一个主要功能   用于加载集合中的组件。该功能   被称为defineCustomElements()，在执行过程中需要调用一次   应用程序的自举。一个方便的地方   在main.ts中是这样的：

我尝试将defineCustomElements()文件导入main.ts，如下所示：

但是我遇到以下错误：

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

我是否必须使用npm install安装此模块？

如果是这样，指南为何不包含该说明？

Answer 1

  

模板尚未支持单个人的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 2

@Kingamere是的，您需要先在项目中安装Web组件。集成模具Web组件的步骤应如下：

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. 在项目中的任何位置使用模板组件的选择器

Answer 3

我遇到了同样的错误。

对我来说，我将模板Web组件发布到npm，然后将其安装到我的项目中。

当我忘记在npm run build之前运行npm publish 时，我有相同的“找不到模块”。

Answer 4

这是我的方法：

$ 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);