How to integrate Angular 6 app with Drupal 8 module

Question

I need to wrap up my angular 6 app as Drupal 8 module. I tried to add build files (js, CSS, img) of angular application in Drupal module and defined it as libraries

In 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

Then, in my PHP code, I created a form and added this

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

but, I am getting nothing here. I want to render my Angular application inside the Drupal(as a module).

Am I missing something? Is there a better way to implement this? Thanks.

Answer 1

At first you should check that you load all the necessary scripts in the right order and that the paths are correct. For example, for the Angular 6 quick start project named my-app, and placed in the app directory in Drupal module, it should looks like this:

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

---

Also what is you probably missing is a HTML tag to which the Angular will attach the root application component.

I suggest to create custom block in a drupal module, something like that:

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

}

Then you can place this block with the Angular app anywhere you like through the Drupal admin interface.

---

Alternatively you can create a form:

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.
    }

}

And then, for example, just put this form in the routing:

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'

---

Then check that you have actually enabled your module at /admin/modules page.

Also you may need to clear the site cache on the /admin/config/development/performance.

---

So it might look something like this: