Angular 4 & Liferay 6.2

[Seth Seth, modifié il y a 6 années.]

Hi,

I'm trying to develop a POC portlet on Liferay 6.2 using Angular 4.
To be honest, i have no idea how to make things live together in the same portlet.
Do you have any idea or guidelines to make this happen ?

Thank you in advance.
Cheers.

[David H Nebinger, modifié il y a 6 années.]

In all JS frameworks, it basically boils down to launching the JS app, bound to a specific HTML tag and having the JS app stay within that tag.

6.2 does not have any kind of AMD loader support, so loading your A4 app is going to be challenging. The tried and true method of including all of your script(s) in the liferay-portlet.xml file, then all you need is the bootstrapping support to launch the app within the element.











Come meet me at Devcon 2017 or 2017 LSNA!

[Seth Stark, modifié il y a 6 années.]

thank you for the answer.

So you confirm that the use of Angular 4 within Liferay 6.2 is going to be kind of a technical challenge and that:

--> Angular 4 is not portal ready ? (do you confirm this fact)
--> Liferay 6.2 version is not offering a native AMD to load Angular 4 efficiently (and Javascript framework globally) ?

If we decide to bootstrap the Angular 4 in the portlet/portal context, do you have an exhaustive list of aspects to prepare for / take care of ? just to be aware of work amount.

Thank you David.
Have a nice day.

[Maximilian Ridder, modifié il y a 6 années.]

Hey Seth,

is the integration of Angular 4* just an issue with Liferay 6.2 or even with 7?

did you gain any further experience with that topic?

regards

[Seth Stark, modifié il y a 6 années.]

hi Max

i haven't tried with 7 but it sure will have less problems,
but with 6.2 i now know that there is no warranty working with A4 in 6.2

after a lot of tests i saw that integrating the two will be done breaking the two

and i also think like Liferay are pushing toward SennaJS for SPA in 7.

cheers

[David H Nebinger, modifié il y a 6 années.]

Wait, somewhere this thread derailed without my knowledge.

You can do A4 in 6.2 (challenging) and in DXP.

6.2 is probably the most challenging because a) it doesn't have a later bootstrap (which I believe A4 works better with) and there is no AMD loader (so loading scripts, etc., will be up to you to get right).

On both platforms, it can be challenging to use A4, but that too is up to the developer. First, Liferay themes will have styled tags in ways that a clean browser running A4 will not, so there can be some styling issues to resolve.

Also, Liferay has its own layers of javascript in play which control the UI elements of the portal. When creating any JS-based portlet, you always have to be aware of and avoid stomping on the all of the JS lest things start breaking down.

[Seth Stark, modifié il y a 6 années.]

May be it's supported but in some critical development contexts, it is wise not to do such technical challenges, it is safe to do with supporting bricks.
And if it is feasible, i wonder why Liferay did not give some helloworld-instanceable portlets for the show.
Cheers.

[Paweł Nowak, modifié il y a 6 années.]

There is sample portlet for LR7 on github but after deploying it it doesn't work
https://github.com/liferay/liferay-blade-samples/tree/master/gradle/apps/npm/angular-npm-portlet

I got exception after deploy:
07:29:02,097 ERROR [http-nio-8080-exec-2][ComboServlet:89] java.lang.IllegalArgumentException: Path [e-mail] does not start with a "/" character

[Ivan Zaera, modifié il y a 6 années.]

What version of Liferay 7 are you using?

You need at least FP30 or GA5.

[Paweł Nowak, modifié il y a 6 années.]

GA5

[Ivan Zaera, modifié il y a 6 années.]

Hi Pawel:

I have just downloaded a copy of GA5, installed it in a new empty database and deployed the current Angular blade sample and it works correctly.

Could it be an older version of the sample?
Can you please clean everything (node_modules, build dir, etc.) or better redownload the sample and try again?

[Ivan Zaera, modifié il y a 6 années.]

Or maybe... Are you putting the sample in an exisiting blade workspace? Because you also need a specific version of gradle's workspace plugin. Specifically 1.7.0.

[Paweł Nowak, modifié il y a 6 années.]

Indeed when I build portlet from project liferay-blade-samples it worked but when I created my own liferay workspace and copied there portlet,
after deployment It didn't work.
So what exactly should I do ?
change in settings.gradle
com.liferay.gradle.plugins.workspace to 1.7 ???

[Paweł Nowak, modifié il y a 6 années.]

I changed com.liferay.gradle.plugins.workspace to 1.7.0 and rebuild it and portlet didn't deploy properly

[BundleStartStopLogger:38] STOPPED com.liferay.blade.npm.angular.portlet_1.0.0 [527]

[Paweł Nowak, modifié il y a 6 années.]

I've changed

com.liferay.gradle.plugins.workspace to latest.release

and it started working but when I added app.component.html
app.component.ts looks like this

@Component({
  selector: '#angular-npm-portlet-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  title = 'Tour of Heroes';
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}

I saw in browser console error

?browserId=other&minifierType=&languageId=en_US&b=7004&t=1510599768287&/o/js/resolved-module/reflect-metadata@0.1.10/Reflect.js&
/o/js/resolved-module/zone.js@0.8.17/dist/zone-node.js&/o/js/resolved-module/angular-npm-portlet@1.0.0
/lib/angular-loader.js:1741 Unhandled Promise rejection: Failed to load app.component.html ; 
Zone: <root> ; Task: Promise.then ; Value: Failed to load app.component.html undefined
</root>

any idea ??

[Ivan Zaera, modifié il y a 6 années.]

Good to hear that it's working.

Regarding the templateUrl attribute, you need to point it to a valid URL that can be retrieved from the server. As all your portlet's resources are exported by the Framework Module Servlet, you can obtain the HTML file from a URL with the following format:

/o/your-portlet-name/path/to/app.component.html

Where path/to/app.component.html is the path to your HTML file in the OSGi bundle's JAR starting from META-INF/resources. In your case, it's probably "/lib/app.component.html".

Cheers,
Ivan

See this post for more info.