Hosting an Angular App Inside a WordPress Site

Sometimes You Want to Have Something More Dynamic

Let’s suppose you have a self-hosted website developed with WordPress. It may be a blog, portfolio, company landing page or whatever.

We all know you can easily add static pages in a WordPress website, but that’s all they are: static pages.

What if you wanted to have something more dynamic and/or interactive?

Your answer at this point may be: “well, you can develop a WordPress plugin for that!”.

That’s actually true, but…

Not All of Us Are WordPress Experts

Truth is that not all of us are WordPress experts. And some of us don’t even want to be! (spoiler: I’m inside that category)

I didn’t ever work professionally with PHP.
The only PHP projects I’ve worked on were all on my spare time and they were quite simple. I’m not really interested in learning WordPress deeply on the technical side, but I do have a blog running on WordPress self-hosted.
In my case it would take me 1/3 of the time to develop an Angular app rather than developing a WordPress plugin, so… why would I have to waste my time?

So what if I told you that you can develop an Angular app and host it inside a static page inside your WordPress website?

And before you panic: I’m not talking about iframes. Using the technique I’ll show you here you’ll achieve a “clean” integration of your app.

The Technique Step by Step

Ok, let’s proceed step by step and see how it’s done.

1. Creating the Static Page in WordPress

The first think we need to make is creating the page that will actually host our app.

I’m not going to cover this step here since it’s so easy and (just in case you really need it) there are already a lot of tutorials online about this — “Google is your friend” they say :)

Please take note of the slug of the page you’re going to create, since we’ll need it in the next steps.

2. Creating the Angular App

The first step clearly is to create an Angular app. We can do this with the cli command:

ng new ng-app --routing

3. Setting the APP_BASE_HREF Token Value

Normally this isn’t required for “standard” Angular scenarios. And even when you do need to change the base href of an app, you usually do so by changing the value of the href attribute of the <base /> tag inside the index.html file of your Angular app.

In our case we won’t use the index.html file (generated by the cli) inside WordPress, so we need another way to set the base href of the application.

We’ll do this by inserting the following line inside the providers property of the @NgModule declaration in the app.module.ts file.

{ provide: APP_BASE_HREF, useValue: '/ng' },

I’ve used /ng because that’s the slug of the static page that I’ve created in WordPress. Here you’ll need to set whatever you chose as the slug of the page.

We’re simply telling Angular that the base address of our app will be the one specified for the APP_BASE_HREF.

4. Developing the Angular App

At this point you can develop your app as you want.

There’s not so much to say, only you know what you need… go and implement it!

5. Creating the Custom Page Template in WordPress

Locate the page.php file of your theme.
You can find this file at the root of your WordPress theme, so the path will be:

wp-content/themes/<theme-name>/page.php

Duplicate this file and rename it using the following structure:

page-<slug>.php

You have to replace <slug> with the actual slug of the static page you created at step 1 of this tutorial.

For example, my slug was ng so I had to name the page page-ng.php.

Doing so will ensure that WordPress loads your custom page template (and not the default one) when you request to load your new static page in the browser.

6. Making Changes to the Custom Page Template

This is the last one. I promise.

Now you’ll need to understand how your theme’s page is structured (in terms of DOM structure) and decide where you want to host your app inside the page: this is up to you and specific to everyone’s needs, so you’ll have to figure it out on your own.

Once you know where you want your app to appear inside the page, place the following code in the specific point:

<app-root></app-root>

This will load the root component of your Angular app inside the page, at the specific location that you chose.

Now build the app with ng build or ng build --prod (in case you want a production build).

Navigate to the dist folder of your app, open the index.html file and copy all the <script> tags you find before the closing </body> tag of the page, as you can see in the following image:

Paste the code you just copied inside the custom page template (in my case page-ng.php) somewhere suitable near the end of the file, and update the src attributes of these tags in order to point to the correct location of these files.

Please note that this last operation is crucial, so make sure you’re using the right paths, otherwise the integration won’t work at all. Just think what the paths should be in order for the browser to be able to load them properly.

DONE.

Enjoy Your App Inside WordPress

If you did everything correctly you’ll be able to see your app loading the static page you created in WordPress (in my case /ng).

Conclusion

I know it’s been lengthy to follow along, but I assure you this is actually shorter to do rather than to read. Just try and you’ll see.

I hope this will be useful for you. I think you can do great things on your WordPress site with this technique, make good use of it! :)