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

Question

我需要将我的 angular 6 应用打包为 Drupal 8 模块。我试图在 Drupal 模块中添加 build files (js, CSS, img) of angular application 并将其定义为 libraries

在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 上的站点缓存。

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

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

How to integrate Angular 6 app with Drupal 8 module

angular

drupal

angular6

drupal-modules

drupal-8