Liferay7.0 portlet 使用 Angular 和 typescript 构建答案

【问题标题】：Liferay7.0 portlet build with angular and typescriptLiferay7.0 portlet 使用 Angular 和 typescript 构建
【发布时间】：2017-06-02 17:28:45
【问题描述】：

我想知道，是否可以基于 angular(2, angular material v1.1.1) 和 typescripting 创建一个 liferay7.0 portlet。

我知道它可以加载（例如）Angular 1.4 lib 并使用纯 javascript/angular 代码创建一个 portlet 来源：https://web.liferay.com/web/sampsa.sohlman/blog/-/blogs/trying-the-angularjs-with-liferay

我想要实现的是创建一个基于 nodejs 包的 portlet。并用 gulp 或其他东西将其编译为 war 文件。

【问题讨论】：

我在这里没有看到问题。 有可能吗？ 很多事情都是可能的。这类问题在 Stackoverflow 上的回答范围很广。如果您有更具体的问题，请尝试一下并回来。或者您在 Liferay-Forum 中发起讨论，这对于此类问题会更有帮助。

标签： angularjs node.js typescript liferay portlet

【解决方案1】：

当然，您可以将 Liferay 与 Angular 集成。目前存在以下官方和功能示例：

https://github.com/liferay/liferay-blade-samples/tree/master/gradle/apps/npm/angular-npm-portlet

但我个人的建议是不要在同一页面中合并 Angular portlet 和非 Angular portlet。

【讨论】：

【解决方案2】：

将基于 Java 的门户与 Angular 集成是非常复杂的。 Liferay 附带AlloyUi。将多个 JS 库一起使用会有副作用，例如 AlloyUI 和 Angularjs。副作用通常表现为更高的加载时间和可能的冲突。每个包含 Angular Portlet 的页面都需要一个 Angular 应用程序 Protlet。一旦将同一个 Angular Portlet 的两个实例放到一个页面上，这将导致冲突，除非所有内容都被命名空间 (<div ng-app="myapp"> ==> <div id="myapp<portlet:namespace/>">)。无法像使用 angularjs 进行经典应用程序开发那样提前定义 URL。 Liferay 门户使用自己的系统生成的 URL，因此需要生成的标签 (portlet:defineObjects, portlet:resourceURL ...) 来创建：

 <URLs(portlet:resourceURL id="config" 
var="config">/portlet:resourceURL> 
<script> var urlConfig = '${config}'; </script>)

并且这些标签在 javascript 文件中将不可用，因为 javascript 首先加载。这最终使使用 angularjs 的开发变得复杂，并且经常遇到 URL 处理问题。将门户 URL 集成到 Angular 中需要大量变通方法代码，因为 Angular 也控制 URL。这基本上是尝试整合两种直接竞争的技术。必须在 AlloyUI 和 Angular 之间进行折衷，这将导致比提供任何实际好处更多的困境。简而言之，技术不可知论在理论上听起来很棒，但实际上效果并不好，而且它的复杂性和缺点比实际好处更多。如果您认为开发然后将独立的 Web 应用程序集成到门户中可以解决问题，那么应该再次查看这一点，因为登录凭据无法与嵌入式应用程序共享。在这种情况下，liferay 没有任何实用性。

【讨论】：

您仅在需要时才在主题中加载 AlloyUI 和其他库。
Javascript 不会比 Liferay URL 先加载。每个 jsp 标签库首先在服务器中呈现。当 javascript 加载时，所有的 JSP 变量都会被解析。

【解决方案3】：

开放讨论。我可以看到的可能方式，无论 Angular 2 及更多通常专注于单页应用程序

Liferay 7 提供 ES6 支持。你编写你的 ES6 代码然后编译它并将它安装为一个模块。 Liferay IDE 中的 Gradle 有一个编译选项，导入是一个单独的包，可以在 OSGI 容器中的所有模块中使用。
Liferay 7 引入了 Metal JS。 Metal JS 具有对 SOY 和 JSX 的模板支持。同样它具有相同的过程，编写 ES6 代码，编译它，安装模块并使用它。
在探索 liferay 源代码时，它使用 babel 而不是 typescript。有扩展名为 .es.js 的文件。 & Liferay 使用 AMD Module loader，所以需要有一个 typescript & AMD Loader 的任务，然后才能通过。需要创建这样的任务然后加载模块可以通过这样的方式完成

require('my-dialog', function(myDialog) { // 你的代码在这里 }，函数（错误）{ 控制台.错误（错误）； });

参考：- https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/liferay-amd-module-loader

Liferay 推出了塞纳 JS。再次是它的 es6 转译文件，对应于每个路由我们定义一个页面，在该页面中我们可以保留一个要加载的组件。

【讨论】：