AEM 6.2 - 使用 Web 组件（聚合物）和 Angular

Posted 2023-02-22

【中文标题】AEM 6.2 - 使用 Web 组件（聚合物）和 Angular

【英文标题】：AEM 6.2 - Working with Web Components (Polymer) & Angular

【发布时间】：2017-02-25 12:27:11

【问题描述】：

我正在开发基于 AEM 6.2 的大型门户的 PoC。

到目前为止，我一直在使用以下 AEM 前端方法：

使用类别管理的前端资源（脚本和样式）。

每种模板的静态类别。

标准组件：

基于 JSP 的服务器端渲染，现在是 Sightly (HTL) 模块化 JS（基于功能或页面） - Vanilla JS 和 jQuery 没有前端 MV* 架构，没有框架

动态组件或 SPA：

混合渲染：Sightly (HTL) + Handlebars 模板 + AJAX 基于 Vanilla JS + Handlebars 的自定义 MVC（一种方式） 没有框架

对于下一个项目，我们正在开发一个新的前端框架：

基于 FE 组件的架构：

Clientlib 和设计将按类别处理。 根据页面组件动态管理 每个 AEM 组件都将映射到一个或多个 UI 组件 样式：主题 + 组件样式 FE 逻辑：服务 + 组件控制器

标准组件：

基于 Sightly (HTL) 的服务器端渲染 基于组件的 JS - Vanilla JS 或 Angular 1.x（组件指令方法）或 Angular 2

复杂的组件：

基于 Sightly (HTL) 的服务器端渲染 基于组件的 JS - Angular 1.x（组件指令方法）或 Angular 2 聚合物封装（可选）

动态组件：

混合渲染：Sightly (HTL) + Polymer Web Components / Angular 2 双向数据绑定 聚合物封装（可选） 适用于 Google API 的 OOTB 聚合物组件

SPA：

浏览器渲染：Angular 1.x（组件指令方法）或 Angular 2 双向数据绑定 + Angular 1.x 路由或 Angular 2 路由 聚合物封装（可选） React.js + Flux 被丢弃

我的担忧 - Web 组件：

依赖 Node.js 来捆绑（硫化）用于生产的组件（根本不是问题）

HTML 导入不适用于作者实例，无论是编辑还是预览。检索到 html，但未呈现组件。没有控制台错误。 Polyfills js 已加载。由于组件未注册，其子组件（polymer.html、polymer-micro.html....）未加载

让我们定义一个 Web 组件 -> 带有文本和图像的横幅组件 /.../components/banner-provider.html（Web 组件提供程序）

<!-- Import element -->
<link rel="import" href="../web-components/banner.html">
<!-- Use element -->
<banner title="$properties.title" src="$properties.src"></banner>

/.../web-components/banner-provider.html（Web 组件定义）

<dom-module id="banner">
    <style>...</style>
    <template>
      ....
    </template>
    <script>
      Polymer(
        is: 'banner',
        properties: 
          title: String,
          src: String
        
      );
    </script>
  </dom-module>

Web 组件可以托管在 AEM 之外的其他系统中，也许是 Node.js 以与 Polymer CLI（硫化和其他工具）一起使用。

我的担忧 - AEM：

缓存和调度器 & SEO -> 延迟加载组件 迁移到 HTTP/2

我的担忧 - Angular 2：

依赖 Node.js 来使用 Typescript 并捆绑组件 它似乎是一个 Web 应用程序框架，而不是一个标准的前端框架 成熟..准备好生产了吗？ 我们想要处理 cms 的前端，我们不想处理 Web 应用程序

..... 你觉得怎么样？ ¿ 您如何在 AEM 上管理您的 SPA？ ¿ 你推荐其他框架或库吗？ .....

非常感谢您的建议。这些用例可扩展到 Liferay、IBM...

提前谢谢你

【问题讨论】：

您是否找到了 HTML 导入链接未在 AEM 作者实例上呈现的解决方案？我在使用 AEM6.2 和聚合物 HTML 导入链接时遇到了同样的情况，但它只影响 Chrome（在作者和发布上），在 FireFox 和 Safari 中运行良好

我在 Chrome 中的作者和发布都遇到了这个问题。由于库冲突或 Author iframes 的问题，我认为这是 AEM 问题。下周我会继续检查它。你找到解决方案了吗？我将尝试在没有任何负载的情况下在干净的页面中呈现 Polymer 组件，以测试是否存在与 AEM 依赖项（cq.widgets、granite...）的任何冲突

【参考方案1】：

我已经让 Polymer 在 AEM 6.x 创作环境中工作，但仍在尝试可能的组件架构（尽管我脑子里有一些想法和意见）。

如果您仍然面临您提到的 HTML 导入问题，那么您可能遇到了与我相同的问题。 在我的游乐场项目中，我将 Web 组件添加为二进制数据（我认为是 nt:file 节点），但是当它们从服务器收到请求时，AEM 的 Sling 引擎将自动添加 'Content-Disposition: attachement'强>头。 在我的设置中，正是这个标头阻止了导入工作。

您可以通过 OSGi 配置控制台 (/system/console/configMgr) 配置“Sling Content Disposition Filter”，并将您的 Web 组件的路径添加为例外。

当然，这很快就会变得非常麻烦，所以我创建了一个足够智能的过滤器，可以拦截对我的 Web 组件存储位置的请求，并自动删除标头。

我希望这会有所帮助！

【参考方案2】：

你提供的代码sn-ps至少有两个问题：

根据Web Components spec, Custom Elements #2.3，组件名称必须连字符（例如，x-banner 而不是banner）。 data binding syntax 是 [[property]] 或 property（不是 $propery）。

如果您想进一步解决此问题，请提供reproducible example。

---

关于架构问题，我认为它们可能超出了 Stack Overflow 的范围。不过，我会提供我的两分钱：

如果要在 Angular1 和 Angular2 之间进行选择，请选择 Angular2，因为它比其前身具有更好的工具和性能（以及其他改进），而且它works well with Polymer。 如果您刚开始使用 Angular 和 Polymer，最好一次学习一项技术（start with Polymer，因为它更简单）。

【讨论】：

re 2：上面的语法是正确的，这是传递给聚合物组件的 AEM 资源属性的视觉 (HTL) 标记