angular - 如何将Angular应用嵌入到Wordpress页面中？

Question

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

我应将Angular应用程序的编译输出(运行ng build后dist文件夹的内容)放在哪里？

我的Wordpress页面(嵌入Angular应用程序的HTML)中的HTML代码是什么样的？

Answer 1

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

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

"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 应用程序。