如何让角应用程序在WordPress插件中运行？

我正在做一个需要Angular加载到Wordpress插件中的项目，在工作中遇到了一些障碍。经过反复试验，我遇到的最后一个错误是：

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>)

插件代码：

<?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\');
?>

我咨询过other threads 在这个主题上，所有内容都在选择器中正确声明，等等，这个纯角度版本在生产和开发环境测试中都可以正常工作。

如果我将注册/排队脚本的函数移动到example_test_function 函数时，应用程序根错误将从控制台中消失，但我仍然无法按预期在屏幕上看到应用程序渲染。

主题定制--当使用php变量时，如何在外部存储javascript？

EDIT: Complete re-write在过去的几周里，我一直在为我的主题开发一个自定义扩展。这是我第一次用Wordpress“开发”。所有的工作都很好，我对结果的功能很满意，尽管它需要一些整理。我希望将我的js函数移到一个外部文件-自定义。js。原始格式：main-block.php$custom1 = $custom_meta[\'custom1\']; <form name=\"customForm\"> Validatio

相关推荐

主题定制--当使用php变量时，如何在外部存储javascript？