在 Angular 中创建可重用的“web-component”/app-component

Question

我们有一个使用 angular-cli 构建的 Angular 4 应用程序。我们不想使用自动生成的index.html，而是希望将其作为插件/小部件分发，客户可以将其导入他们的页面。同样像 disqus cmets 工作，...

使用 AngularJS 内置的先前版本，客户只需包含一个 CSS 和 JS 文件以及应用程序标签。

此问题与Using Angular 2 components in static & non-SPA web applications 类似，但没有描述真正可行的解决方案。

这是我目前所拥有的：

• 在.angular-cli.json 中定义deployUrl
• 提取要包含在新 html 文件中的 js + css 文件列表
• 在 html 文件中添加文件，就像在自动生成的 index.html 中一样

问题是我得到了Uncaught ReferenceError: webpackJsonp is not defined，如https://github.com/angular/angular-cli/issues/2211 中所述。

我当然可以通过 iframe 包含它，但这会使集成和自定义样式变得更加困难。

那么，采用 Angular 应用程序并以某种方式使其可在其他 HTML 页面上重用的最佳选择是什么？

Answer 1

那么，采用 Angular 应用程序并以某种方式制作的最佳选择是什么？ 它可以在其他 HTML 页面上重复使用吗？

我猜你想问如何开发一个 Angular 组件（小部件），然后在另一个 Angular 应用程序上重用它。 Angular 应用程序是在自身上运行的应用程序，它不能嵌入到 HTML 页面中。

我建议您使用 @angular/cli 生成 Angular 应用程序，您将只使用它来开发您的小部件。在其中，您创建一个将成为您的小部件的组件。您在其中创建一个模块，在其中绑定与您的组件相关的所有内容（其他组件、指令、服务等）。在您生成的应用程序上，您在 app.module 上引用该模块并在 app.component.html 上实例化它以便能够开发。但这是您在组件之外所做的唯一事情。完成后，您只需将组件（在他的文件夹中的内容）复制到新应用程序中，然后将组件模块导入新的 app.module 中。这样您就可以根据需要拥有一个可重用的组件/小部件。

PS：不要忘记将组件上使用的任何依赖项也引用到新应用程序中（最好的方法是尽可能限制外部依赖项，这样您就可以拥有一个开箱即用的可重用组件）。