如何将 Angular 应用程序嵌入到 Wordpress 页面中？

Question

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

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

Answer 1

我使用 iFrame 制作了我的解决方案：

在 angular.json 我配置为“prod”

"outputHashing": "none"

然后我使用“prod”配置构建我的 Angular 7 应用程序：

ng build --prod

我将构建输出（通常是 $PROJECT_DIR/dist）复制到我的 wordpress 页面“wp-content”目录内的子目录“angular-app”中。

现在 Angular 应用的 index.html 需要修改。改变

<base href="/">

到

<base href="/wp-content/angular-app/">

请注意，基本 href 路径中的尾随 / 是绝对必要的。没有它就行不通。

在我安装 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 页面上显示我的 angular 应用程序。