Сначала вы должны проверить, что вы загружаете все необходимые скрипты в правильном порядке и что пути верны. Например, для проекта быстрого запуска Angular 6 с именем my-app, расположенного в каталоге app в модуле Drupal, он должен выглядеть следующим образом:
drupal_angular_lib:
version: 1.x
js:
app/dist/my-app/runtime.js: {}
app/dist/my-app/polyfills.js: {}
app/dist/my-app/styles.js: {}
app/dist/my-app/vendor.js: {}
app/dist/my-app/main.js: {}
Также вам, вероятно, не хватает тега HTML, к которому Angular будет прикреплять корневой компонент приложения.
Я предлагаю создать пользовательский блок в модуле drupal, что-то вроде этого:
drupal_angular / SRC / Plugin / Block / AngularAppBlock.php
<?php
namespace Drupal\drupal_angular\Plugin\Block;
use Drupal\Core\Block\BlockBase;
/**
* @Block(
* id = "drupal_angular",
* admin_label = @Translation("Drupal Angular"),
* category = @Translation("Custom"),
* )
*/
class AngularAppBlock extends BlockBase
{
/**
* {@inheritdoc}
*/
public function build()
{
return [
'#type' => 'html_tag',
'#tag' => 'app-root', // Selector of the your app root component from the Angular app
'#attached' => [
'library' => [
'drupal_angular/drupal_angular_lib', // To load the library only with this block
],
],
];
}
}
Затем вы можете разместить этот блок в приложении Angular в любом месте через интерфейс администратора Drupal.
В качестве альтернативы вы можете создать форму:
drupal_angular / ЦСИ / Форма / AngularAppForm.php
<?php
namespace Drupal\drupal_angular\Form;
use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;
class AngularAppForm extends FormBase
{
/**
* {@inheritdoc}
*/
public function getFormId()
{
return 'drupal_angular_app_form';
}
/**
* {@inheritdoc}
*/
public function buildForm(array $form, FormStateInterface $form_state)
{
$form[] = [
'#type' => 'html_tag',
'#tag' => 'app-root',
'#attached' => [
'library' => [
'drupal_angular/drupal_angular',
],
],
];
return $form;
}
/**
* {@inheritdoc}
*/
public function validateForm(array &$form, FormStateInterface $form_state)
{
// TODO.
}
/**
* {@inheritdoc}
*/
public function submitForm(array &$form, FormStateInterface $form_state)
{
// TODO.
}
}
А потом, например, просто поместите эту форму в маршрутизацию:
drupal_angular / drupal_angular.routing.yml
drupal_angular.app_form:
path: '/drupal-angular' # Path that you want for your form
defaults:
_title: 'Drupal Angular Form'
_form: '\Drupal\drupal_angular\Form\AngularAppForm'
requirements:
_permission: 'access content'
Затем убедитесь, что вы действительно включили свой модуль на странице /admin/modules.
Также вам может понадобиться очистить кеш сайта на /admin/config/development/performance.
Так что это может выглядеть примерно так:
