Follow Digital Valhalla on WordPress.com
Sun. Aug 9th, 2020

Digital Valhalla

Desert of the real

Angular in WordPress

3 min read

Below are some notes Thisself has put together in experimenting with the possibility of integrating Angular 9 with WordPress without having to rely on a plugin.

In summary: Yes. Of course, it is possible.

Here is why: Angular is, at the end of the day, a JavaScript framework. Though written in Typescript and with a bit of a learning curve, the end results do compile to 5 JavaScript files. Thus, if JavaScript can be included in a WordPress page (and it can), then yes it is possible to compose a page in WordPress entirely in Angular.

The caveat being that although JavaScript can be included in a WordPress page, doing so is not easily facilitated by the WYSIWYG approach WordPress is known for. One does need at least a novice understanding of web development to proceed, since these scripts are page-specific includes.

This tutorial assumes one is already comfortable with Angular. Its main purpose is to assist in getting it into here – it being Angular, here being WordPress. This can be somewhat non-intuitive, though not overwhelmingly so.

The main hurdles are minor enough, consisting mainly in:

  1. <base href> doesn’t seem to register. Angular needs this.
  2.  Scripts need to be enqueued within PHP rather than the HTML due to WordPress being what it is. This adds a slight twist to the work-flow as compared to when using Angular in ASP.Net application 

It’s wonky, but not difficult.

Here is how it is done:

  • First create your Angular SPA (Single page application) locally.
  • Edit app.module.ts to include
    import { APP_BASE_HREF} from ‘@angular/common’;  
    import { RouterModule } from ‘@angular/router’;

    imports: [
        RouterModule,

    providers: [{provide: APP_BASE_HREF, useValue : ‘/angular-scratchpad‘ }],

    as illustrated in the screen shot below.

This is, again, to circumvent <base href=””> seeming not to be recognized when added to the page’s HTML for reasons unclear. Here, you’ll want to specify the base URL of the Page that is hosting the Angular content (highlited). In the case of this demonstration, it is “/angular-scratchpad”.

There are likely better work-arounds for this. The above solution is simply a way to do it, and does not pretend to be the only or even the best way to do it. Further investigation will undoubtedly uncover the actual root cause for this anomaly and with it a less obtuse approach.

  • Next, build your Angular SPA as you normally would locally using ng -build
  • FTP the compiled  .js files runtime-es5.js, polyfills-es5.js, styles-es.js,vendor-es5.js, and main-es5.js from the \dist\ folder of the application to the FTP directory on your WordPress where you store your scripts. Ideally, this should be a designated sub-folder for the SPA created to keep things organized.
  • Create a new Page in WordPress and edit the HTML in code editor to read as follows: <app-root></app-root>. Nothing more need be added here. 
  • Note the ID of the Page by examining the URL when it is being eddited
    • i.e. https://digitalvalhalla.com/wp-admin/post.php?post=801&action=edit
  • Edit your site’s theme’s functions.php (located in wp-content/themes/<themename> by appending the following function and function call to the end of it *note that you will replace 801 with the ID of the page, and pathtoangularscripts with the corresponding path they were FTP’d to in the previous step.

function load_ng_script() {
if( is_page(801) ) {
wp_enqueue_script(‘runtime-es5’, ‘/pathtoangularscripts/runtime-es5.js’, array(‘jquery’), ”, false);

wp_enqueue_script(‘polyfills-es5’, ‘/pathtoangularscripts/polyfills-es5.js’, array(‘jquery’), ”, false);

wp_enqueue_script(‘styles-es’, ‘/pathtoangularscripts/styles-es.js’, array(‘jquery’), ”, false);

wp_enqueue_script(‘vendor-es5’, ‘/pathtoangularscripts/vendor-es5.js’, array(‘jquery’), ”, false);

wp_enqueue_script(‘main-es5’, ‘/pathtoangularscripts/main-es5.js’, array(‘jquery’), ”, false);
}
}

add_action(‘wp_enqueue_scripts’, ‘load_ng_script’);

*note the false parameter is important. These scripts must be loaded after <app-root></app-root> has been rendered in the DOM since that is their target, thus they should not be loaded in the header. The false parameter ensures this.

With that in place, your page will be up and hosting an Angular SPA as demonstrated here: https://digitalvalhalla.com/angular-scratchpad

Featured image “borrowed” from the article https://www.freecodecamp.org/news/angular-2-versus-react-there-will-be-blood-66595faafd51/

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Side Bar

Copyright © 2020 DigitalValhalla All rights reserved.