如何将Angular应用程序嵌入Worpress页面？

Question

我创建了一个完成的Angular 7应用程序，该应用程序已编译并可以运行（这是一个小游戏）。我想将其包含在我的Wordpress安装页面中。

1. 我将Angular应用程序的编译输出（运行ng build后dist文件夹的内容）放在哪里？
2. 我的Wordpress页面（嵌入Angular应用程序的HTML）中的HTML代码是什么样的？

Answer 1

我使解决方案可以与iFrame一起使用：

在angular.json中，我为“产品”配置了

"outputHashing": "none"

然后，我使用“产品”配置构建了Angular 7应用程序。

我将构建输出复制到我的wordpress页面“ wp-content”目录内的子目录“ angular-app”中。 在我的wordpress安装的目标页面上，我插入了以下自定义HTML代码：

<iframe id="angularFrame" title="My Angular App" frameBorder="0"
    src="http://wordpress-url.com/wp-content/angular-app/index.html" 
    width="600" height="600">
</iframe>

这会在wordpress页面上显示我的角度应用程序。