I'm struggling to make Angular 7 and Wordpress work together. Well, actually, I've managed to make it to work without any plugins, that was not too hard itself, but I can't seem to make angular get any assets. The problem is that my Angular app sits on a URL like https://mywordpresssite.com/dashboard And my angulare project uses assets folter to store its images. When I build the app and place it on my site, Angular tries to get its assets from https://mywordpresssite.com/dashboard/assets/... (its base url is poiting to /dashboard) and, of course, wordpress spits out 404 page. In wordpress itself I'm getting different images like this:
function _img($image_name) {
echo get_template_directory_uri() . "/assets/{$image_name}";
}
I wanted to use some custom routes and I've made a route to https://mywordpresssite.com/assets using this class https://github.com/anthonybudd/WP_route like this
WP_Route::get("assets/{image_name}", 'get_image_for_angular');
function get_image_for_angular($image_name) {
echo get_template_directory_uri() . "/{$image_name}";
}
And it shows the correct path to the file but nonetheless, wordpress still shows 404 along with that.
I also tried to use file_get_contents, it shows the image's bytes and 404 contents after that
I'm completely stuck with this. Can anyone help me resolve this? What is the corrent way to make Angular aware of the WP's asstets
p.s. My Angular project lives in other repo itself and does not know anything about the site's structure. I'm only building it to my site. I don't want to use any absolute paths, I need to keep angular as it is
I've managed to resolve this by now. Here is my solution
WP_Route::get("assets/img/{image_name}", 'get_image_for_angular');
function get_image_for_angular($image_name) {
$path = get_template_directory_uri() . "/img/{$image_name}";
header("Location: {$path}", TRUE, 301);
exit();
}
It works. But I feel something bad about this. So I would still appreciate if someone told me about a better approach