0

I am working on a project that requires Angular to be loaded in a Wordpress plugin, and am running into some snage getting it working. After some trial and error, the final error I ran into was:

main-es5.js?ver=5.3.2:1 ERROR Error: The selector "app-root" did not match any elements
    at e.value (main-es5.js?ver=5.3.2:1)
    at yi (main-es5.js?ver=5.3.2:1)
    at ji (main-es5.js?ver=5.3.2:1)
    at Ni (main-es5.js?ver=5.3.2:1)
    at Object.Xi [as createRootView] (main-es5.js?ver=5.3.2:1)
    at t.value (main-es5.js?ver=5.3.2:1)
    at t.value (main-es5.js?ver=5.3.2:1)
    at e.value (main-es5.js?ver=5.3.2:1)
    at main-es5.js?ver=5.3.2:1
    at Array.forEach (<anonymous>)

The plugin code:

<?php
/*
* Plugin Name: Example
* Description: description
* Version: 1.0
* Author: Some guy
* Author URI: www.website.com
* Test Domain: pluginname
*/

wp_register_script( 'example_main5_js', plugins_url('/hello-app/main-es5.js', __FILE__));
wp_register_script( 'example_main2015_js', plugins_url('/hello-app/main-es2015.js', __FILE__));
// wp_register_script( 'example_poly5_js', plugins_url('/hello-app/polyfills-es5.js', __FILE__));
// wp_register_script( 'example_poly2015_js', plugins_url('/hello-app/polyfills-es2015.js', __FILE__));
wp_register_script( 'example_run5_js', plugins_url('/hello-app/runtime-es5.js', __FILE__));
wp_register_script( 'example_run2015_js', plugins_url('/hello-app/runtime-es2015.js', __FILE__));


function example_enqueue_script() {
  wp_enqueue_script('example_main5_js');
  wp_enqueue_script('example_main2015_js');
  // wp_enqueue_script('example_poly5_js');
  // wp_enqueue_script('example_poly2015_js');
  wp_enqueue_script('example_run5_js');
  wp_enqueue_script('example_run2015_js');
}

add_action('wp_enqueue_scripts', 'example_enqueue_script');



function example_test_function() {

echo '<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HelloApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<body>
  <app-root></app-root>
</body>
</html>';
}

add_action( 'wp_footer', 'example_test_function');
?>

I have consulted with other threads on this topic, and everything is properly declared in the selector, etc, the pure Angular version of this works without issue in both production and development environment tests.

If I move the functions registering/enqueuing the scripts to inside the example_test_function function, the app-root error disappears from the console, but I'm still not seeing the app render on-screen as expected.

0

I was close here, but what needed to happen to make it work was to pass in true as an argument to the optional in_footer parameter like so:

wp_enqueue_script('cbd_main5_js', '', [], false, true);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.