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

Question

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

我的指示说：

使用 Stencil 构建的组件集合包含一个 main 函数，用于加载集合中的组件。该函数被调用defineCustomElements()，并且需要在应用程序的引导期间调用一次。这样做的一个方便的地方是main.ts：

我尝试defineCustomElements()在我的main.ts文件中导入如下：

但我收到以下错误：

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

我必须使用安装这个模块npm install吗？

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

score 1 · Accepted Answer

我是这样做的：

$ npm i 网络社交分享

$ 在应用程序模块/功能模块中添加 CUSTOM_ELEMENTS_SCHEMA：

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

然后最后在 main.ts

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

score 0 · Accepted Answer

我遇到了同样的错误。

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

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

score -1 · Accepted Answer

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

在 Angular 项目中安装组件 ( npm install <module-name>)
在 app.module.ts ( schemas: [CUSTOM_ELEMENTS_SCHEMA])中启用自定义元素架构
在 app.component.ts 中导入组件（import * as <name> from 'test-components/dist/loader';)
将组件注册到注册表 ( <name>.defineCustomElements(window);)
在项目中的任何位置使用模板组件的选择器

3 回答 3