Question

我需要将我的angular 6应用程序包装为Drupal 8模块。我试图在Drupal模块中添加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且位于Drupal模块的app目录中的Angular 6快速入门项目，它应如下所示：

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: {}

您可能还缺少Angular将根应用程序组件附加到的HTML标签。

我建议在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模块集成

1 个答案: