主页 / user-2246787

Darsh8's questions

Martin Hope
Darsh8
Asked: 2025-03-21 19:06:23 +0800 CST
  • 5

我正在尝试使用 Angular 为 Liferay 创建客户端扩展，但在部署扩展后，它显示为空白屏幕。以下是我遵循的步骤：

我采取的步骤：

  • 创建Liferay工作区：

  • 我创建了一个liferay-workspace，并在工作区内添加了一个 client-extensions 文件夹。

创建 Angular 项目：

  • 在 client-extensions 文件夹中，我使用 ng new 创建了一个 Angular 项目。我使用的 Angular 版本是 14。

我对 Angular 项目做了一些更改：

  • 创建 client-extension.yaml 文件
assemble:
    - from: build/static
      into: static
sample-page:
    cssURLs:
        - styles.*.css
    friendlyURLMapping: sample-page
    htmlElementName: sample-page
    instanceable: false
    name: My Sample Page 
    portletCategoryName: category.client-extensions
    type: customElement
    urls:
        - main.*.js
        - polyfills.*.js
        - runtime.*.js
    useESM: true
  • 更新了 app.component.ts 中的 app-root 标签以匹配来自客户端扩展 YAML（sample-about-page）的自定义元素名称。

应用程序.组件.ts

@Component({
  selector: 'sample-page',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
  • 更新了 index.html 中的根元素以使用 。添加了必要的 client-extension.yaml 文件来配置扩展。

索引.html

<body>
  <sample-page></sample-page>
</body>

建设项目：

从工作区根目录，我运行了./gradlew build，它创建了 dist 和 build 文件夹，并生成了 Angular 项目的 ZIP 文件。

部署到liferay：

  • 我将生成的 ZIP 文件复制到liferay-portal/osgi/client-extensions文件夹中。
  • 我通过导航到liferay-portal/tomcat/bin并运行命令启动了 Liferay 服务器sh startup.sh。
  • Liferay 服务器在 localhost:8080 上启动。
  • 我在控制面板（控制面板>客户端扩展）中验证了客户端扩展，并且该扩展已列在那里。
  • 在主页上，我点击了铅笔（钢笔图标），在小部件列表中找到了扩展程序。将扩展程序拖放到屏幕上后，它显示为空白屏幕。

问题：Angular 客户端扩展出现在 Liferay 的小部件部分，可以拖到页面上，但小部件本身在页面上呈现时是空白的。

附加信息：

  • client-extension.yaml 文件配置了正确的 htmlElementName (sample-page)。
  • index.html 中的根元素已更新为使用 。
  • 我没有使用 Angular 路由，所有代码都放在 app.component.html 里面。

可能出现什么问题？

如果您能提供任何见解或建议，说明部署后客户端扩展显示为空白屏幕的原因，我将不胜感激。在将 Angular 客户端扩展与 Liferay 集成时，我是否可能错过了其他配置或步骤？

tomcat