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

【问题标题】：How can I embed an Angular app into a Wordpress page?如何将 Angular 应用程序嵌入到 Wordpress 页面中？
【发布时间】：2019-09-14 12:45:51
【问题描述】：

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

我将 Angular 应用程序的编译输出（运行 ng build 后 dist 文件夹的内容）放在哪里？
我的 Wordpress 页面中的 HTML 代码（嵌入 Angular 应用的 HTML）看起来如何？

【问题讨论】：

使用iFrame。
laternastudio.com/blog/…

标签： angular wordpress

【解决方案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 应用程序。

【讨论】：

为什么要设置"outputHashing": "none"？ index.html 无论如何都会有脚本的散列名称
src="wordpress-url.com/wp-content/angular-app/index.html" 说找不到该页面
"wordpress-url.com" 只是一个示例，您需要将其替换为您的实际 wordpress URL
您还可以将 Angular 应用程序部署到在子域上运行的单独应用程序并在 iframe 中打开它。主要好处是更好的可部署性。 Wordpress 网站通常是公司的主要网站，而 Angular 应用程序则服务于特定的用例。依赖于部署整个 Wordpress 站点来更改 Angular 应用程序（反之亦然）并不是很好。