Ask Questions and Find Answers
Important:
Ask is now read-only. You can review any existing questions and answers, but not add anything new.
But - don't panic! While ask is no more, we've replaced it with discuss - the new Liferay Discussion Forum! Read more here here or just visit the site here:
discuss.liferay.com
Liferay 6.2 with Angular 5 and multiple portlets
My team is trying to Migrate from using AngularJS to Angular 5 with Liferay. From the tutorials I have seen, like in the blogs listed below:
https://www.surekhatech.com/blog/-/blogs/angular-4-portlet-in-liferay-dxp-7
https://www.azilen.com/blog/create-an-angular-2-application-in-liferay-dxp/
It seems like when you are using Angular with portlets, you are only having 1 portlet configured and from that portlet, the Angular app will content all the content for the site. In my team, we have multiple pages, and each page has 1 portlet that uses Angularjs currently. It we need to configure your app to have multiple portliest(1 per page but multiple portlets in the app itself) do we need to create this file structure for each portlet.
|_app
|--ap.component.ts
|--app.module.ts
|--main.ts
|--view.jsp
where in our main.ts we specify the entry to Angular app for that portlet. In a sense, do each portlet contain it's own angular app on that page it there is only 1 portlet on the page?
I hope question isn't too confusing.
https://www.surekhatech.com/blog/-/blogs/angular-4-portlet-in-liferay-dxp-7
https://www.azilen.com/blog/create-an-angular-2-application-in-liferay-dxp/
It seems like when you are using Angular with portlets, you are only having 1 portlet configured and from that portlet, the Angular app will content all the content for the site. In my team, we have multiple pages, and each page has 1 portlet that uses Angularjs currently. It we need to configure your app to have multiple portliest(1 per page but multiple portlets in the app itself) do we need to create this file structure for each portlet.
|_app
|--ap.component.ts
|--app.module.ts
|--main.ts
|--view.jsp
where in our main.ts we specify the entry to Angular app for that portlet. In a sense, do each portlet contain it's own angular app on that page it there is only 1 portlet on the page?
I hope question isn't too confusing.
Attachments:
Speaking generally, the challenge for multiple JS app-based portlets on one page is typically the limitations of the framework itself.
For example, Angular was one of the first to leverage the address bar to maintain state and navigation details while using the app. As such, the framework itself often may not understand how to handle two different apps each trying to maintain different state using the single address bar.
Now, as an Angular portlet developer I can take this kind of thing into account and manage state and nav details differently, but I have to build that in on day one.
Other issues can crop up if you don't use namespacing. If two different apps use "app" as their name or two different instances are dropped on the same page, if there hasn't been any namespacing the apps can step all over each other.
Again, as an Angular portlet developer I can take this kind of thing into account and ensure that my app will not step on anyone else's or even itself when multiple copies are put on a single page.
Some parts of co-habitation may or may not be possible though. If your angular app initializes some component, it is typically doing so at an assumed page scope. Why? Well because typically that is all angular component developers ever concern themselves with. But now if you are trying to initialize the component in two different apps, what will the outcome be? Likely they too will step all over each other and odd outcomes can occur.
Long story short, multiples are possible. There is nothing to prevent you from bootstrapping different JS apps into different divs on a page. This is really what you're talking about doing, it's not really portal related as much as it is understanding how to bootstrap multiple apps into different tags in one page. There are extra considerations you need to keep in mind for this to work, some extra concerns you need to worry about, but they are doable.
For example, Angular was one of the first to leverage the address bar to maintain state and navigation details while using the app. As such, the framework itself often may not understand how to handle two different apps each trying to maintain different state using the single address bar.
Now, as an Angular portlet developer I can take this kind of thing into account and manage state and nav details differently, but I have to build that in on day one.
Other issues can crop up if you don't use namespacing. If two different apps use "app" as their name or two different instances are dropped on the same page, if there hasn't been any namespacing the apps can step all over each other.
Again, as an Angular portlet developer I can take this kind of thing into account and ensure that my app will not step on anyone else's or even itself when multiple copies are put on a single page.
Some parts of co-habitation may or may not be possible though. If your angular app initializes some component, it is typically doing so at an assumed page scope. Why? Well because typically that is all angular component developers ever concern themselves with. But now if you are trying to initialize the component in two different apps, what will the outcome be? Likely they too will step all over each other and odd outcomes can occur.
Long story short, multiples are possible. There is nothing to prevent you from bootstrapping different JS apps into different divs on a page. This is really what you're talking about doing, it's not really portal related as much as it is understanding how to bootstrap multiple apps into different tags in one page. There are extra considerations you need to keep in mind for this to work, some extra concerns you need to worry about, but they are doable.
I understand that you can have multiple portlets on a page. But your application only have 1 portlet per page. I am just wondering if for each page that you have a portlet(only 1 portlet is on the page) will we have to create the file structure above for each portlet.
Each portlet would be it's own project and therefore have it's own copy of the file structure.
ok, thanks.