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

#angular #wordpress

Вопрос:

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

Куда мне поместить выходные данные для компиляции приложения Angular (содержимое папки dist после запуска ng build)?
Как выглядит HTML-код на моей странице WordPress (HTML, который встраивает приложение Angular)?

Ответ №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>

Это отобразит мое приложение Angular на странице WordPress.

1. Зачем вам нужно устанавливать "outputHashing": "none" ? index.html в любом случае у скриптов будут хэшированные имена

2. src=» wordpress-url.com/wp-content/angular-app/index.html «говорит, что страница не найдена

3. «wordpress-url.com «это всего лишь пример, и вам нужно заменить его вашим фактическим URL WordPress

4. Вы также можете развернуть приложение Angular в отдельном приложении, работающем в поддомене, и открыть его в iframe. Основным преимуществом будет лучшая возможность развертывания. Сайт WordPress обычно является основным сайтом компании, в то время как приложение Angular предназначено для конкретного варианта использования. Зависимость от развертывания всего сайта WordPress для внесения изменений в приложение Angular и наоборот не очень хороша.

5. Это работает как шарм! Спасибо!!