Liferay DXP 7.4 supports Angular 19 custom element client extensions?

RE: RE: Liferay DXP 7.4 supports Angular 19 custom element client extensions?

2025-06-23T17:36:02Z

I add a few lines as we were able to run some Angular projects in our test environments.

What David says is correct you have to convert the main angular component to a Standard Web component and create a Custom Element, we used @angular/elements for our tests. This step is important otherwise the application will never load within Liferay. For its implementation be careful as it changes slightly depending on the versions of Angular (at least in our tests we tested v.17, 19 and 20).

Another thing that was blocking us from properly running the application in Liferay was the lack of the "import ‘zone.js’ " in the main.ts file of the project. On this I cannot give you any other explanation unfortunately, but by simply adding this import the application started without any error.

The last step we had to do was to configure in the app.config.ts the HashLocationStrategy as our LocationStrategy, maybe it is not an elegant solution and if there are anchors in the application it could create problems, but in this way there is no risk that angular interprets the Liferay friendlyUrl urls as its own route and goes in error.

I hope I have helped!

RE: Liferay DXP 7.4 supports Angular 19 custom element client extensions?

2025-06-12T14:02:31Z

Client extensions in Angular 19 can work, but your Angular code must be in the form of a standard web component.

If you're not building standard web components, you're going to face problems.

You can ask chatgpt or gemini or the others to help you migrate your angular 19 app to be a standard web component, they can help with the conversion. It's not going to change the fundamentals of your application, just the packaging and stuff.

RE: Liferay DXP 7.4 supports Angular 19 custom element client extensions?

2025-06-12T13:37:03Z

I am facing a similar error. I have an Angular 19 application running on a remote server, and I set the client extension to point to the main.js, polyfils.js, and style.css files.

When I try to load the application into the page it doesn't load right away and generates an error.

The strange thing is that if I create a new page with the same CX when I navigate to the second page the angular application loads correctly and then stops working the moment you do a browser page refresh or go to another portal page.

What I would like to understand is if you have to modify the Anguar project in some specific way or if you have to do some Liferay side configurations.

Liferay DXP 7.4 supports Angular 19 custom element client extensions?

2025-03-13T20:14:51Z

I had created a custom element client extension, based on an Angular 19 application. The applicantion runs fine outside Liferay, but when I use the client extension from a page in Liferay, it does not load, with a javascript error:

main-P7JQYSSB.js?t=1741218955318:8 Uncaught TypeError: Ae.process.toString is not a function
at main-P7JQYSSB.js?t=1741218955318:8:154113
polyfills-OEPZ4W45.js?t=1741218955318:1 Uncaught TypeError: Y.process.toString is not a function
at polyfills-OEPZ4W45.js?t=1741218955318:1:11222

The line that triggers the error is inside the file zone.js of Angular:

const isNode = !('nw' in _global) &&
    typeof _global.process !== 'undefined' &&
    _global.process.toString() === '[object process]';

it seems that Angular is trying to detect if it runs on a nodejs enviroment, accessing the process attribute in the _global variable. In the browser, this _global variable points to the window object and does not have a process attribute. Unfortunately in the Liferay enviroment the window object has a process attribute of type Module, and this attribute does not have the toString() method, so the bootstrap fails.

Is it possible add the toString() property to the process attribute in the window object in some point of the client extension?

Thank you for your advise