Enonic XP + Angular 6 + Custom elements


Just started a new xp lab project for a new client and implemented html custom element to solve the problem of combining xp with angular 6 (not relevant for AngularJs)

The problem with Angular is that it wants to be a single page application and it doesn’t really combine that well with server side rendering by a cms solution. This changed with the introduction of Angular 6 and Angular elements. So now you can create server side rendered parts from Enonic XP with custom elements from Angular.

You can add custom elements to your server side rendered XP parts and with Angular elements add content to those elements. They will also as far as I can see be rendered correctly in preview.

As custom elements is still not well supported in all browsers including Firefox, I added pollyfills for custom elements and those seemed to work as expeded, and according to what I have read, it should “work” with IE9. Yeah, this is the bleeding edge tech.

So if you’re thinking of adding Angular 6 to your XP project, go ahead and use Angular elements to add ng to your XP project. If of interest I can go into details on how it is solved in a dev environment with auto page reload on changes.