Search code examples
angularjsnode.jstypescriptliferayportlet

Liferay7.0 portlet build with angular and typescript

I'm wondering, is it possible to create a liferay7.0 portlet based on angular(2, angular material v1.1.1) and typescripting.

I know its possible to load (for example) Angular 1.4 lib and create a portlet with plain javascript/angular code source: https://web.liferay.com/web/sampsa.sohlman/blog/-/blogs/trying-the-angularjs-with-liferay

What i would like to achieve is to create a portlet based on nodejs packages. and to compile it with gulp or something to a war file.

Solution

  • Its Open for discussion. Possible ways i can see, irrespective of Angular 2 & More focused on Single Page Application In General

    1. Liferay 7 Provides ES6 Support. Your write your ES6 code & Then transpile it & install it as a module. Gradle in Liferay IDE has a option for transpilation & import is a seperate package, which can be used through out all modules in the OSGI Container.

    2. Liferay 7 Introduced Metal JS. Metal JS has template support for SOY & JSX. Again it has same process, write ES6 Code, transpile it , install the module & Use it.

    3. When explored liferay source code it uses babel & not typescript. there are files with extension .es.js. & Liferay uses AMD Module loader, so there needs to be a task for typescript & AMD Loader, which then can be passed. Such task needs to be created & Then loading the module can be done by something like this

      require('my-dialog', function(myDialog) { // your code here }, function(error) { console.error(error); });

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

    1. Liferay introduced senna JS. Again its es6 transpiled file, where corresponding to each route we define a page, In that page we can keep a component to be loaded.