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...
For further actions, you may consider blocking this person and/or reporting abuse
This is brilliant, thank you.
Glad you liked it! Hopefully you get some use out of it.
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.
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.
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!
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.
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.
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?
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?
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.