如何将 Angular 6 应用程序与 Drupal 8 模块集成

Question

我需要将我的 Angular 6 应用程序打包为 Drupal 8 模块。我尝试在 Drupal 模块中添加 Angular 应用程序的 build files (js, CSS, img) 并将其定义为库

在drupal_angular.libraries.yml

drupal_angular_lib:
  version: 1.x
  css:
    theme:
      css/bootstrap.min.css: {}
      css/demo.css: {}
      css/paper-dashboard.css: {}
      css/styles.a3a18ed7bbe6e603703b.css: {}
      css/themify-icons.css: {}
  js:
    js/main.5c5c8e529add0697c1bf.js: {}
    js/polyfills.a75b8d97ee951ee6b5c4.js: {}
    js/runtime.a66f828dca56eeb90e02.js: {}
    js/scripts.542a57744863c85b72b6.js: {}
  dependencies:
    - core/jquery
    - core/drupalSettings

然后，在我的 PHP 代码中，我创建了一个表单并添加了这个

$form['#attached']['library'][] = 'drupal_angular/drupal_angular_lib';

但是，我在这里什么也得不到。我想在 Drupal 中渲染我的 Angular 应用程序（作为一个模块）。

我错过了什么吗？有没有更好的方法来实现这一点？谢谢。

Answer 1

首先，您应该检查是否以正确的顺序加载了所有必要的脚本，并且路径是否正确。例如，对于名为my-app 的Angular 6 快速入门项目，它位于Drupal 模块的app 目录中，它应该如下所示：

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
        ],
      ],
    ];
  }

}

然后，您可以通过 Drupal 管理界面将此块与 Angular 应用程序放在您喜欢的任何位置。

---

您也可以创建一个表单：

drupal_angular/src/Form/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 上的站点缓存。

---

所以它可能看起来像这样：