Move Angular components to Wordpress

Question

I'm trying to move my angular application to wordpress. For that, I don't need all the components because some things are done with wordpress. But I need to be able to use the selectors. I'm using the normal wordpress build, not Angular-WP. For that first, I started making a prod of the angular app.

ng build --prod

To insert all the files was hard, because I get wordpress.com and not .org so I used the next command for making a single file of js

"buildForShip": "ng build --prod --output-hashing=none && cat hosting/public/{runtime,polyfills,scripts,main}.js > plainHTML/ship.js"

The problem comes when adding the file to WP it says: "No base href set" For that I add the <base href="/"> But then is throwing the next error: "Uncaught SyntaxError: missing ) after argument list"

I also have looked for Angular Elements like in this blog

But It hasn't worked too, maybe I'm oing something bad.

I think if can get the selector working in a plain html file, like index.html; will be easier to import on WP.

Anyone could help or have some idea about?

Thank for all guys.

Answer 1

I have released a plugin, Xo for Angular, which aims to provide a foundation for WordPress and Angular. Xo provides a capability to host and load your Angular App as a theme within WordPress that integrates nicely with pages, posts, etc.

https://wordpress.org/plugins/xo-for-angular/

It is currently in beta and would appreciate any feedback!

Xo lets you create all content, pages, posts, media, etc within your WordPress and have those items routed and resolved dynamically in your Angular App.

Documentation (work in progress): https://angularxo.io/

Plugin github: https://github.com/WarriorRocker/angular-xo-core

Example theme: https://github.com/WarriorRocker/angular-xo-material

In this theme (located at /wp-content/themes/angular-xo-material/src) the base href is set as <base href="/"> .

It should be possible to copy an existing Angular App to a new theme and let Xo load and direct front-end requests to the Angular index. Then you can use the Xo API to retrieve pages and posts within your WordPress.

Full disclosure I am the author of the above plugin and theme.

Let me know if you think this could work for you, thanks!