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
* 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.
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
* 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.
1 Answer
Reset to default 0I 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);