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

时间:2017-07-21 13:44:44

标签: angular angular-cli web-component

我们有一个使用angular-cli构建的Angular 4应用程序。我们希望将其作为插件/小部件分发,而不是使用自动生成的index.html,客户可以在其页面上导入。与disqus评论工作类似,......

使用AngularJS中的先前版本,客户只需要包含一个CSS和JS文件以及应用程序标记。

此问题与Using Angular 2 components in static & non-SPA web applications类似。但是,实际上并没有描述可行的解决方案。

这是我到目前为止所做的:

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

问题是我收到了https://github.com/angular/angular-cli/issues/2211中描述的Uncaught ReferenceError: webpackJsonp is not defined

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

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

1 个答案:

答案 0 :(得分:0)

  

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

我猜你想问你如何开发一个角度组件(widget),然后在另一个角度应用程序上重用它。角度应用程序是一个自行运行的应用程序,无法嵌入HTML页面。

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

PS:不要忘记将组件上使用的任何依赖项也引用到新的应用程序中(最好的方法是尽可能地限制外部依赖项,这样你就可以开箱即用了一个可重用的组件)。