使用 angular 和打字稿构建 Liferay7.0 portlet
Liferay7.0 portlet build with angular and typescript
我想知道，是否可以基于 angular(2, angular material v1.1.1) 和打字稿创建一个 liferay7.0 portlet。
我知道它可以加载（例如）Angular 1.4 库并使用纯 javascript/angular 代码创建一个 portlet
来源：https://web.liferay.com/web/sampsa.sohlman/blog/-/blogs/trying-the-angularjs-with-liferay
我想实现的是创建一个基于 nodejs 包的 portlet。并用 gulp 或其他东西将其编译为 war 文件。
欢迎讨论。
我可以看到的可能方式，与 Angular 2 及更多一般情况下专注于单页应用程序无关
Liferay 7 提供 ES6 支持。您编写 ES6 代码，然后将其转换并作为模块安装。 Gradle 在 Liferay IDE 中有一个转译选项，导入是一个单独的包，可以在 OSGI 容器中的所有模块中使用。
Liferay 7 引入了 Metal JS。 Metal JS 具有对 SOY 和 JSX 的模板支持。它再次具有相同的过程，编写 ES6 代码，编译它，安装模块并使用它。
在探索 liferay 源代码时，它使用 babel 而不是 typescript。有扩展名为 .es.js 的文件。 & Liferay使用的是AMD Module loader，所以需要有一个typescript & AMD Loader的task，然后才能传过去。需要创建这样的任务，然后加载模块可以通过这样的方式完成
要求（'my-dialog'，函数（myDialog）{
// 你的代码在这里
}, 函数（错误）{
console.error（错误）；
});
参考：- https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/liferay-amd-module-loader
- Liferay 引入了塞纳 JS。再次是它的 es6 转译文件，其中对应于我们定义页面的每个路由，在该页面中我们可以保留要加载的组件。
将基于 java 的门户与 angular 集成非常复杂。 Liferay 附带 AlloyUi。将多个 JS 库一起使用会有副作用，例如 AlloyUI 和 Angularjs。
副作用通常表现为较长的加载时间和可能的冲突。每个包含 angular portlet 的页面都需要一个 angular app 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>)
并且这些标签在 java 脚本文件中不可用，因为 java 脚本首先加载。
这最终使 angularjs 的开发变得复杂，并且经常遇到 URL 处理问题。由于 angular 也控制 URL，因此需要大量解决方法代码才能将门户 URL 集成到 angular 中。这基本上是一种尝试整合两种直接竞争的技术。
必须在 AlloyUI 和 Angular 之间做出折衷，这将导致比提供任何实际好处更多的困境。
简而言之，技术不可知论在理论上听起来不错，但实际上并没有那么好用，它的并发症和缺点多于实际好处。
如果您认为开发一个独立的 Web 应用程序然后将其集成到门户中可以解决问题，那么应该重新考虑一下，因为登录凭据无法与嵌入式应用程序共享。在这种情况下，liferay 没有任何用处。
毫无疑问，您可以将 Liferay 与 Angular 集成。目前在以下位置存在官方和功能性示例：
https://github.com/liferay/liferay-blade-samples/tree/master/gradle/apps/npm/angular-npm-portlet
但我个人的建议是不要在同一页面中合并 Angular portlet 和非 Angular portlet。
我想知道，是否可以基于 angular(2, angular material v1.1.1) 和打字稿创建一个 liferay7.0 portlet。
我知道它可以加载（例如）Angular 1.4 库并使用纯 javascript/angular 代码创建一个 portlet 来源：https://web.liferay.com/web/sampsa.sohlman/blog/-/blogs/trying-the-angularjs-with-liferay
我想实现的是创建一个基于 nodejs 包的 portlet。并用 gulp 或其他东西将其编译为 war 文件。
欢迎讨论。 我可以看到的可能方式，与 Angular 2 及更多一般情况下专注于单页应用程序无关
Liferay 7 提供 ES6 支持。您编写 ES6 代码，然后将其转换并作为模块安装。 Gradle 在 Liferay IDE 中有一个转译选项，导入是一个单独的包，可以在 OSGI 容器中的所有模块中使用。
Liferay 7 引入了 Metal JS。 Metal JS 具有对 SOY 和 JSX 的模板支持。它再次具有相同的过程，编写 ES6 代码，编译它，安装模块并使用它。
在探索 liferay 源代码时，它使用 babel 而不是 typescript。有扩展名为 .es.js 的文件。 & Liferay使用的是AMD Module loader，所以需要有一个typescript & AMD Loader的task，然后才能传过去。需要创建这样的任务，然后加载模块可以通过这样的方式完成
要求（'my-dialog'，函数（myDialog）{ // 你的代码在这里 }, 函数（错误）{ console.error（错误）； });
参考：- https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/liferay-amd-module-loader
- Liferay 引入了塞纳 JS。再次是它的 es6 转译文件，其中对应于我们定义页面的每个路由，在该页面中我们可以保留要加载的组件。
将基于 java 的门户与 angular 集成非常复杂。 Liferay 附带 AlloyUi。将多个 JS 库一起使用会有副作用，例如 AlloyUI 和 Angularjs。
副作用通常表现为较长的加载时间和可能的冲突。每个包含 angular portlet 的页面都需要一个 angular app 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>)
并且这些标签在 java 脚本文件中不可用，因为 java 脚本首先加载。 这最终使 angularjs 的开发变得复杂，并且经常遇到 URL 处理问题。由于 angular 也控制 URL，因此需要大量解决方法代码才能将门户 URL 集成到 angular 中。这基本上是一种尝试整合两种直接竞争的技术。 必须在 AlloyUI 和 Angular 之间做出折衷，这将导致比提供任何实际好处更多的困境。 简而言之，技术不可知论在理论上听起来不错，但实际上并没有那么好用，它的并发症和缺点多于实际好处。 如果您认为开发一个独立的 Web 应用程序然后将其集成到门户中可以解决问题，那么应该重新考虑一下，因为登录凭据无法与嵌入式应用程序共享。在这种情况下，liferay 没有任何用处。
毫无疑问，您可以将 Liferay 与 Angular 集成。目前在以下位置存在官方和功能性示例：
https://github.com/liferay/liferay-blade-samples/tree/master/gradle/apps/npm/angular-npm-portlet
但我个人的建议是不要在同一页面中合并 Angular portlet 和非 Angular portlet。