Contacto

Integrando Angular 5 en Drupal

Este artículo tiene como objetivo integrar una aplicación desarrollada en Angular 5 dentro de un sitio Drupal, para ello seguiremos una secuencia de pasos:

Es importante resaltar que usaremos una aplicación angular ya creada, que puedes verlo en el articulo anterior de "Consumiendo un web service hecho en drupal desde Angular 5".

 

Generamos un build del proyecto en Angular

Aún usaremos la herramienta Angular CLI, podemos usar un comando para obtener el build que necesitamos, los siguientes son las variantes que podemos usar para generarlo:

 

Para generar el built simplemente

ng build

 

Para generar el build y dentro de el mismo indica la ruta base donde funcionara.

ng build --base-href=/my/app/

 

Genera el build con los archivos optimizados (minimizados).

ng build --prod

 

Ya conociendo las posibilidades yo he utilizado el comando de la siguiente manera, optimizado con --prod y especificando la ruta base con --base-href :

ng build --prod --base-href=http://localhost/drupal/drupalws/angular-app

 

Ese comando nos genera el siguiente resultado en la consola:

Resultado de comando build

 

Con cualquiera de las variantes mostradas se genera un directorio llamado /dist/ en el raiz del proyecto el en nuestro caso contendrá los siguientes archivos:

 

dist/

-- index.html

-- inline.0f57995f73099c14aaee.bundle.js

-- main.9f4e1b32c1d034e5be87.bundle.js

-- polyfills.f20484b2fa4642e0dca8.bundle.js

-- styles.9c0ad738f18adc3d19ed.bundle.css

 

Crear un módulo personalizado que genere una ruta donde integrar el app

El módulo se llamará: dw_schoollist

Dentro del módulo pondremos la carpeta dist/ con los archivos que la integran

 

Crearemos el archivo dw_schoollist.info.yml

Este archivo contendrá la siguiente información necesaria:

archivo .info.yml del modulo

 

Crearemos el archivo dw_schoollist.routing.yml

Este archivo contendrá la siguiente información, básicamente la ruta y la clase con el método que se ejecutará:

Archivo routing

 

Crearemos el archivo dw_schoollist.module

Este archivo contendrá la siguiente información, el hook help con información de ayuda, el hook page_attachment para enviar una metadata necesaria por la aplicación y el hook theme.

Archivo .module primera parteArchivo .module segunda parteArchivo .module tercera parte

 

Crearemos el archivo de la clase SchoollistController.php

Este archivo contendrá la siguiente información, en resumen tendrá el método que llamará al template y le adjuntará una librería que definiremos más adelante.

Controller

 

 

Crearemos el archivo dw_schoollist.libraries.yml

Este archivo contendrá la siguiente información, un css y 3 archivos javascript que son lo que se encuentran dentro del directorio dist/

Libraries

 

Crearemos un template para la nueva página schoollist.html.twig

Este archivo contendrá, solamente el elemento selector <app-root> como se aprecia en la siguiente imagen:

template

 

Instalamos el módulo y visitamos la ruta creada

En nuestro caso la ruta es /angular-app , veremos nuestra aplicación en marcha dentro de la región content de nuestro Drupal, lo hemos marcado en un recuadro rojo para diferenciarlo.

Prueba de la nueva ruta

 

Añadir nuevo comentario

HTML Restringido

  • Etiquetas HTML permitidas: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Saltos automáticos de líneas y de párrafos.
  • Las direcciones de correos electrónicos y páginas web se convierten en enlaces automáticamente.
CAPTCHA
Esta pregunta para comprobar que eres una persona real e impedir el envío de SPAM.