DEV Community

Cover image for Take Your WordPress Site Farther With Angular

Take Your WordPress Site Farther With Angular

Stephen Whitmore on October 22, 2022

TL;DR You can create a micro frontend with Angular and dress it up like a WordPress plugin. Here's a working example of what I'm talking...
Collapse
 
wordpressure profile image
TricaExMachina

This is brilliant, thank you.

Collapse
 
stephenwhitmore profile image
Stephen Whitmore

Glad you liked it! Hopefully you get some use out of it.

Collapse
 
wordpressure profile image
TricaExMachina

While a little removed from the point of your post, this did inspire me to rebuild my personal site, which was straight wordpress/PHP, into a headless wp site with an angular frontend. Its been a good workout for practicing Angular, so thanks for that.

Collapse
 
leonardofabian profile image
Leonardo Fabian

Excellent, I just have one question, why didn't you put the dist folder and the plugin file inside the plugin folder? So a user would only have to copy the plugin folder and that's it.

Collapse
 
stephenwhitmore profile image
Stephen Whitmore

I think that may be a typo in the example after folder structure. I just ran the build in the example project and it looks like it does in fact put the dist folder in the plugin folder with the plugin file. Thanks for catching that!

Image description

Collapse
 
leomayer profile image
leomayer

Thx a lot for providing a full example. This made my day. With eating the appetite arise and more questions come.

First of all I want to note that the build script has a small bug since your plugin name is hard coded at one place. You'll recognize when changing the name of it. I managed to correct it without problems. The other thing which took me a while to understand was that the structure is not the default Angular one. Which I figured out after some time. Angular won't have an additional app-folder but your script relies on this. Plus the plugin.php has finally a wrong folder structure. Tiny bits but worth to mention.

The other thing: is there a way to include within the sample a configuration interface? One which is ONLY for the Settings within WordPress. With your approach I can only imagine two separate plugins but might be wrong. Perhaps you have a better idea.

Collapse
 
icolumbro profile image
Ivan Columbro

Hello, using this approach to run an Angular app inside a WordPress page, how is it possible to manage the various routes foreseen by an application? I mean in the typical way that for each route a component is used, for example if I go to /my-first-route, MyFirstComponent is rendered.

Collapse
 
stephenwhitmore profile image
Stephen Whitmore

Do you mean how would the Angular app see the URL of the WordPress page? If that's the case I want to say you simply can't because the app is embedded and is therefore isolated from the rest of the page; making it unaware. I can't say with absolute certainty.

I may not be understanding you 100% though. Could you elaborate more?

Collapse
 
lewismorgans profile image
Lewis

This doesn't seem to be working for me :(. When I upload the plugin as soon as I activate it, I can see the contents of the php file printed out at the top of the plugin page? Following from that when also trying to create a new page and using the [ng_wp] once again it simply outputs the text from the php file. Any help available?

Collapse
 
merp02 profile image
Mer • Edited

Thanks for sharing this, it's great!
I have a question: what if I would like to add 2 plugins to the same wordpress app?
I create two, I change name of function and variables, but I have problem with display it. Only one is added per site even I add 2 shortcode. If I use it on separate sites - everything is ok.