Foros del Web » Programando para Internet » Node.js »

[SOLUCIONADO] node+angular+webpack+bower_components los componentes no se reconocen entre si

Estas en el tema de node+angular+webpack+bower_components los componentes no se reconocen entre si en el foro de Node.js en Foros del Web. Les cuento, estamos trabajando en una aplicación que entre sus funciones tiene una que despliega gráficos de distintos tipos (incluyendo gráficos de distribución geográfica), esto ...
  #1 (permalink)  
Antiguo 29/08/2016, 09:06
 
Fecha de Ingreso: agosto-2006
Mensajes: 141
Antigüedad: 10 años, 5 meses
Puntos: 0
Pregunta node+angular+webpack+bower_components los componentes no se reconocen entre si

Les cuento, estamos trabajando en una aplicación que entre sus funciones tiene una que despliega gráficos de distintos tipos (incluyendo gráficos de distribución geográfica), esto operaba correctamente hasta que a otro colega se le ocurrió implementar webpack lo cual nos obligo a cambiar la estructura de casi todo el sistema , y algunas cosas dejaron de funcionar
en la version sin webpack usabamos
Código HTML:
<script src="bower_components/proj4/dist/proj4.js"></script>
<script src="bower_components/highcharts/highcharts.js"></script>
<script src="bower_components/highcharts/highcharts-more.js"></script>
<script src="bower_components/highcharts/modules/map.js"></script>
<script src="bower_components/highcharts-ng/dist/highcharts-ng.js"></script>
<script src="bower_components/highcharts/modules/data.js"></script> 
en la versión con webpack tuvimos que cambiar a esto
Código:
require('proj4');
window.Highcharts = require('../bower_components/highcharts/highcharts.js');
require('../bower_components/highcharts/modules/data.js');
require('../bower_components/highcharts/modules/map.js');
require('../bower_components/highcharts/highcharts-more.js');
require('../bower_components/highcharts-ng/dist/highcharts-ng');
sin embargo con esto solo funcionan los gráficos de barras y puntos (y obtenemos errores al momento de intentar cargar el mapa)
removiendo "window.Highcharts" solo obtenemos erroes de angular
si reemplazo highcharts por highmaps se dibuja el mapa, pero los puntos (coordenadas) no se renderizan debido a que no detecta la libreria proj4 (los otros graficos tambien dejan de funcionar)

he revisado la documentacion de highcharts y buscado por separado cada uno de los errores y todos apuntan a que debo cargar esas librerias (hasta el momento no he visto nada util en la documentación de webpack)

la única solución hasta el momento ha sido cargar de forma externa proj4 y highcharts usando script src (externa por que las locales no quedan disponibles)

lo malo es que esta solución no es practica, ya que podríamos tener el mismo problema con otros componentes, y cargar todos los componentes manualmente seria un despropósito

debo indicar que el colega al que se le ocurrió implementar webpack renuncio antes de terminarla, y los colegas que lograron completarla no fueron capaces de dar con una solución diferente

saludos

edit: logre encontrar finalmente una solución
primero instale script-loader y luego cambie los require de la siguiente manera:
Código:
require("script!../bower_components/proj4/dist/proj4.js");
require("script!../bower_components/highcharts/highcharts.js");
require("script!../bower_components/highcharts/highcharts-more.js");
require("script!../bower_components/highcharts/modules/data.js");
require("script!../bower_components/highcharts/modules/map.js");
require("script!../bower_components/highcharts/modules/exporting.js");

Última edición por GreenlanternX; 29/08/2016 a las 10:46 Razón: solucion encontrada



La zona horaria es GMT -6. Ahora son las 06:51.