Including an Angular 7 App Inside WordPress, Laravel, or any PHP Page

I’ve been recently learning Angular so that I can incorporate it into a PHP application. I was surprised to find, though, that despite Angular’s popularity it is difficult to find resources on the best way to include/embed an Angular app inside an existing PHP page. After a couple hours of searching and consulting other users on StackOverflow, I figured out a workable solution.

Am I the only one doing this?

From the get-go, I’ve been quite puzzled by the lack of resource on this topic. Of course, you’ll find a handful of resources across the web claiming that they show how to integrate Angular with PHP (in some cases with Laravel, for example), but in the end you’ll realize that they’re talking about the old-fashioned AngularJS, not the latest and greatest Angular (which is, at the time of this writing, at version 7).

As a result, when I finally turned to StackOverflow, I was half-expecting to hear “you should never include Angular inside a PHP application, and here’s why…” Honestly, that would have been just as informative to me.

Instead, though, I got some useful answers. Here are two options that I think are pretty good.

Option 1: Ditch your app’s `index.html` and include its contents instead

Turns out, all that your app really needs in order to work on your PHP page is (all credit to StackOverflow user ivanivan for this):

The presence of <app-root></app-root>
Your app’s script files

Adding the <app-root> tags to your PHP page is no sweat, but by default it’s difficult to include the script files because the Angular compiler creates dynamic file names. To turn those dynamic file names off, you’ll want to set "outputHashing" to "none" in angular.json (credit to StackOverflow user user184994).

Once you’ve taken care of that, you can use a simple PHP function like this to simplify inserting those two prerequisites:

/**
 * Include the necessary content to make an Angular app work
 *
 * @link    https://goo.gl/jxZueN
 * @param   string  $dist_path  path to the `dist` folder of your app
 * @return  void
 */
function include_angular_app( $dist_path )
{
    $scripts = array(
        'runtime.js',
        'polyfills.js',
        'styles.js',
        'vendor.js',
        'main.js'
    );

    echo "<app-root></app-root>";
    foreach ($scripts as $script) {
        echo "<script src='{$dist_path}/$script'></script>";
    }
}

Then, you can use it in your PHP file like this:

include_angular_app('/path/to/app/dist');

Of course, if you’ve chosen to put other complex elements or script includes inside your app’s `index.html` file, you’ll want to update this helper function to include those files as well.

Option 2: Unwrap the body tags with PHP

In the comments of the aforementioned StackOverflow page, someone suggested just using PHP’s include() and including the entire index.html file inside PHP. That poses some problems because while you can remove the <html> and <head> tags just fine, Angular requires you to have a <body> tag in that file.

In order to make this work, then, you’ll want to:

Make sure that the <body></body> tags are the outermost tags in your app.component.html file.
Strip the body tags from index.html at runtime via PHP

This helper function will strip the body tags:

/**
 * Include an Angular app
 *
 * @link    https://goo.gl/jxZueN
 * @param   string  $dist_path  path to the `dist` folder of your app
 * @return  void
 */
function include_angular_app( $dist_path )
{
    $html = file_get_contents($dist_path . '/index.html');
    $html = substr($html, 6); // Removes <body>
    $html = substr($html, 0, -7); // Removes </body>
    echo $html;
}

I prefer the first option I showed, though.

Anyways, that about wraps it up!

Blog