Implementar Angular en Odoo
Sobre como una WebApp de Angular se integra con Odoo
Pasará por la mente de cualquier desarrollador, con elevada o escasa experiencia, la idea de utilizar un desarrollo de Angular sobre el gran ERP de Odoo. En Moldeo Interactive nos especializamos implementando Odoo desde el año 2010 y utilizando el framework Angular (a partir de Angular 2) desde sus primeras versiones de prueba, lo que nos da un cierto aval para hablar al respecto de ambas tecnologías operando en su conjunto. Cabe mencionar que Odoo utiliza un sistema mediante el renderizado de Templates con Qweb (Backbone), empleando como gran constructor el lenguaje de Python. Angular utiliza TypeScript y funciona en un servidor de Node. La realidad es que, por muy interesante que estaría que Odoo utilizara Angular para sus Vistas y Modelos, no parece haber intensiones de ser ese el camino en lo inmediato. Aún así, si es posible (y muy interesante) producir una WebApp en Angular que funcione en una página o un snippet de Odoo. Hoy nos vamos a concentrar en la parte más sencilla, implementar una WebApp de Angular en una página de Odoo y no en operaciones más complejas como relacionar datos de un Modelo con Angular (lo que también se puede hacer).
Tendremos, en cuestión, dos opciones: un compilado tradicional o uno con Angular Elements. Para el caso de Angular Elements, recomendamos ver nuestro posteo al respecto. No obstante es una opción un tanto compleja si lo único que queremos es mostrar una WebApp (mejor dejar Elements para la conexión entre datos de Odoo y Angular). Lo primero es asegurarnos que nuestra App funciona correctamente de forma local, para esto vamos a compilarla con la siguiente línea de comando:
ng build --prod --output-hashing=none --base-href ./
Una de las consideraciones a tener en cuenta está dentro del bloque <head> del index.html generado. Debe encontrarse una línea en referencia a la base, debe verse asi: <base href="./">
En nuestro módulo de Odoo ubicaremos el archivo CSS generado de Angular (styles.css) en la ruta static/src/css; y los archivos JS generados por Angular (runtime.js, polyfills.js y main.js) en la ruta static/src/js. Los archivos pueden variar dependiendo la versión de Angular, recomendamos utilizar la última estable. En el archivo XML que renderiza el template haremos un record que modifique el head del template, y vamos a agregar la siguiente línea:
<link rel="stylesheet" href="nombre_modulo/static/src/css/styles.css" />
Esto linkeará los estilos de nuestra WebApp, así que posteriormente solo nos queda incluir en el record del cuerpo del template la tag app-root y los archivos JS, en ese orden:
<app-root></app-root>
<script type="text/javascript" src="nombre_modulo/static/src/js/runtime.js"></script>
<script type="text/javascript" src="nombre_modulo/static/src/js/polyfills.js"></script>
<script type="text/javascript" src="nombre_modulo/static/src/js/main.js"></script>
Con esto, si los llamados a los archivos y templates son correctos, tendremos nuestra WebApp de Angular funcionando en nuestro Odoo.
Acerca de:
Ignacio Buioli
Licenciado en Artes Multimediales. Ha desarrollado numerosos proyectos de Multimedia así como también escrito artículos y traducido textos del mencionado tema. En Moldeo Interactive es Socio y Programador; encargándose, además, de gran parte de las redes y los cursos online.