在 Angular 中创建可重复使用的 "web-component" / 应用程序组件
Create reusable "web-component" / app-component in Angular
我们有一个使用 angular-cli 构建的 Angular 4 应用程序。我们不想使用自动生成的 index.html
,而是将其作为插件/小部件分发,客户可以将其导入到他们的页面上。与 disqus 评论类似,...
之前的版本内置AngularJS,客户只需包含一个CSS和JS文件以及应用标签。
此问题与 Using Angular 2 components in static & non-SPA web applications 类似,但并未描述真正有效的解决方案。
这是我目前的情况:
- 在
.angular-cli.json
中定义了 deployUrl
- 提取 js + css 文件列表以包含在新 html 文件中
- 在 html 文件中添加文件,就像在自动生成的
index.html
中一样
问题是我收到 Uncaught ReferenceError: webpackJsonp is not defined
,如 https://github.com/angular/angular-cli/issues/2211 中所述。
我当然可以通过 iframe 包含它,但这会使集成和自定义样式变得更加困难。
那么什么是最好的选择来获取 Angular 应用程序并以某种方式使其可在其他 HTML 页面上重复使用?
So what are the best options to take an Angular app and somehow make
it reusable on other HTML pages?
我猜你想问的是如何开发一个 angular 组件(小部件),然后在另一个 angular 应用程序上重用它。 angular 应用是自行运行的应用,不能嵌入到 HTML 页面。
我建议您使用@angular/cli 生成angular 应用程序,您将仅使用它来开发您的小部件。在其中,您创建一个将成为您的小部件的组件。您在其中创建一个模块,您可以在其中绑定与组件相关的所有内容(其他组件、指令、服务等)。在您生成的应用程序中,您在 app.module 上引用该模块并在 app.component.html 上实例化它以便能够开发。但这是您在组件之外所做的唯一事情。完成后,您只需将您的组件(他的文件夹中的内容)复制到您的新应用程序并将组件模块导入新的 app.module。这样您就可以根据需要获得可重复使用的 component/widget。
PS:不要忘记将组件上使用的任何依赖项也引用到新应用程序中(最好的方法是尽可能限制外部依赖项,这样您就可以拥有可重用的组件开箱即用)。
我们有一个使用 angular-cli 构建的 Angular 4 应用程序。我们不想使用自动生成的 index.html
,而是将其作为插件/小部件分发,客户可以将其导入到他们的页面上。与 disqus 评论类似,...
之前的版本内置AngularJS,客户只需包含一个CSS和JS文件以及应用标签。
此问题与 Using Angular 2 components in static & non-SPA web applications 类似,但并未描述真正有效的解决方案。
这是我目前的情况:
- 在
.angular-cli.json
中定义了 - 提取 js + css 文件列表以包含在新 html 文件中
- 在 html 文件中添加文件,就像在自动生成的
index.html
中一样
deployUrl
问题是我收到 Uncaught ReferenceError: webpackJsonp is not defined
,如 https://github.com/angular/angular-cli/issues/2211 中所述。
我当然可以通过 iframe 包含它,但这会使集成和自定义样式变得更加困难。
那么什么是最好的选择来获取 Angular 应用程序并以某种方式使其可在其他 HTML 页面上重复使用?
So what are the best options to take an Angular app and somehow make it reusable on other HTML pages?
我猜你想问的是如何开发一个 angular 组件(小部件),然后在另一个 angular 应用程序上重用它。 angular 应用是自行运行的应用,不能嵌入到 HTML 页面。
我建议您使用@angular/cli 生成angular 应用程序,您将仅使用它来开发您的小部件。在其中,您创建一个将成为您的小部件的组件。您在其中创建一个模块,您可以在其中绑定与组件相关的所有内容(其他组件、指令、服务等)。在您生成的应用程序中,您在 app.module 上引用该模块并在 app.component.html 上实例化它以便能够开发。但这是您在组件之外所做的唯一事情。完成后,您只需将您的组件(他的文件夹中的内容)复制到您的新应用程序并将组件模块导入新的 app.module。这样您就可以根据需要获得可重复使用的 component/widget。
PS:不要忘记将组件上使用的任何依赖项也引用到新应用程序中(最好的方法是尽可能限制外部依赖项,这样您就可以拥有可重用的组件开箱即用)。