Как я могу вставить приложение Angular на страницу Worpress?

Question

Я создал готовое приложение Angular 7, которое скомпилировано и работает (это небольшая игра).Я хочу включить его в страницу моей установки Wordpress.

1. Куда поместить выходные данные компиляции приложения Angular (содержимое папки dist после запуска сборки ng)?
2. Как работает HTML-код на моей странице Wordpress (HTMLчто встраивает приложение Angular) как выглядит?

Answer 1

Я сделал свое решение, работая с iFrame:

В angular.json я настраиваю для "prod"

"outputHashing": "none"

Затем я создаю свое приложение Angular 7, используя конфигурацию "prod":

ng build --prod

Я копирую вывод сборки (обычно $ PROJECT_DIR / dist) в подкаталог «angular-app» внутри каталога «wp-content» моей страницы WordPress.

Теперь index.html приложения Angular нуждается в модификации.Измените

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