How to use Angular with WordPress as headless server on the same domain?

Question

UPDATED QUESTION:

I know I asked it differently before, but actually that was the question. I just need to put together WordPress and Angular so whenever I go to /wp-admin/ I go to wordpress admin, and whenever I go anywhere else it renders Angular app. The problems with that are:

How to remove wordpress templates and always load Angular manifest file? (e.g index.html)
How to create manifest that would be .php file, but load Angular app?
Where to place all Angular files as well as /dist folder?

OLD QUESTION:

Using .htaccess how to rewrite root to use subfolder, but still allow /wp-admin?

I have set up wordpress, and uploaded in it's root directory my angular app, that has path /angular/dist/spa. I need to add rewrite rules to .htaccess so any url goes directly to that subfolder, but /wp-admin/*.

Can't find fully working solution, it either allows whole app to work or admin panel to work.

Here's my default .htaccess:

# BEGIN WordPress

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

# END WordPress

Also it'd be helpful if you suggest any other idea how to use angular app inside wordpress (with no additional plugins), cuz that's the only way I found, but it feels like there's better ways.

Alex Chebotarsky · Accepted Answer

First thing first you should put your files in WordPress theme. Which has index.php file so your angular manifest code (index.html) goes there, but with proper links to assets.

For example here's how it might look like after ng build --prod:



  
    
    Title

The problem with the code above is that files have random hashes after the file name and since we're going to put files in a WordPress theme they are going to be placed at /wp-content/themes/%ThemeName%/dist/.

We need to remove hashing in angular.json:

...
"outputHashing": "none",
...

And add proper paths to assets manually or by adding it to the build command ng build --prod --deploy-url /wp-content/themes/%ThemeName%/dist/.

So our index.html looks like:



  
    
    Title

Perfect! Now we need to move that to the WordPress theme index.php:

As you can see we replaced some parts with WordPress functions, like language_attributes, bloginfo('charset'), body_class.

Ok. The only problem, is that WordPress is not always loading index.php, sometimes it will load front-page.php, 404.php etc. So we need to force the WordPress to always load index.php. We can do that by adding this to function.php file of the WordPress theme:

add_filter('template_include', function ($template) {
    $template = get_query_template('index');
    return $template;
});

Now all we need to do is put /dist folder right along with index.php file in the theme. And it works!

If you want to compile angular on the server

Let's create angular folder in our theme and put in there all our angular files. If we run ng build --prod it would compile all files and put/dist inside the angular folder, but we need to put it outside so it's accessible with path /wp-content/themes/%ThemeName%/dist/. For that we need to add one more setting to angular.json:

...
"outputPath": "../dist",
...

Brilliant! Our compiled /dist folder will be placed outside of current (angular) folder and will be accessible for our index.php file!

I just described how I got this whole thing to work, hope it helps somebody else.

How to use Angular with WordPress as headless server on the same domain?

Using .htaccess how to rewrite root to use subfolder, but still allow /wp-admin?

Answers (2)

If you want to compile angular on the server

Related Questions