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.
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:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.