Angular-google-maps: Soporte angular 6

Aquí para los comentarios

Hola,

Acabo de intentar ejecutar mi proyecto, estos son los errores relacionados:

node_modules/@agm/core/services/google-maps-api-wrapper.d.ts(2,10): error TS2305: Module '"my-project/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@agm/core/services/managers/circle-manager.d.ts(2,10): error TS2305: Module '"my-project/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@agm/core/services/managers/data-layer-manager.d.ts(2,10): error TS2305: Module '"my-project/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@agm/core/services/managers/info-window-manager.d.ts(1,10): error TS2305: Module '"my-project/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@agm/core/services/managers/kml-layer-manager.d.ts(2,10): error TS2305: Module '"my-project/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@agm/core/services/managers/marker-manager.d.ts(2,10): error TS2305: Module '"my-project/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@agm/core/services/managers/polygon-manager.d.ts(2,10): error TS2305: Module '"my-project/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@agm/core/services/managers/polyline-manager.d.ts(2,10): error TS2305: Module '"my-project/node_modules/rxjs/Observable"' has no exported member 'Observable'.

"@agm/core": "^1.0.0-beta.2",
"@angular/*": "6.0.0",
"rxjs": "^6.1.0",
"typescript": "2.7.2"

Resolví mis problemas mediante la instalación
npm install rxjs<strong i="6">@6</strong> rxjs-compat<strong i="7">@6</strong> --save

como se describe https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md

Los mapas agm se rompen con RXJS 6 y necesita el módulo de compatibilidad para la compatibilidad con versiones anteriores

Todavía tengo un problema con "snazzy-info-window" después de la actualización de Angular 6.
core.js:1601 ERROR Error: Uncaught (in promise): TypeError: elems[0] is not a constructor TypeError: elems[0] is not a constructor at snazzy-info-window.js:130 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388) at Object.onInvoke (core.js:4071) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138) at zone.js:872 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4062) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at snazzy-info-window.js:130 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388) at Object.onInvoke (core.js:4071) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138) at zone.js:872 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4062) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at resolvePromise (zone.js:814) at resolvePromise (zone.js:771) at zone.js:873 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4062) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at drainMicroTaskQueue (zone.js:595)

Y también recibo este mensaje de advertencia:
client?719c:153 ./node_modules/@agm/snazzy-info-window/directives/snazzy-info-window.js System.import() is deprecated and will be removed soon. Use import() instead. For more info visit https://webpack.js.org/guides/code-splitting/

Tenga cuidado con el uso del paquete rxjs-compat , ya que es solo una solución alternativa y agregará muchos gastos generales a su proyecto. Ahora es necesario debido a muchos paquetes como este que aún no se actualizaron a RxJS 6, pero elimínelo lo antes posible.

@epenance hizo un buen trabajo al actualizar el paquete a [email protected] , pero creo que antes de hacerlo completamente compatible con Angular6, debe verificar si hay cambios importantes.

@ ukon1990, el angular 6 cambió para usar el paquete web 4, que cambió el comportamiento durante la importación dinámica de módulos commonjs. No sé por qué, pero la directiva snazzy-info-window está utilizando la biblioteca snazzy-info-window de importación dinámica, es por eso que hay una advertencia y una directiva snazzy-info-window rota. Para arreglarlo https://github.com/SebastianM/angular-google-maps/blob/1a74b3a9670cf4dbf442033a17dea290dfadc408/packages/snazzy-info-window/directives/snazzy-info-window.ts#L228
debe cambiarse a this._nativeSnazzyInfoWindow = new elems[0].default(options); pero no es una solución de compatibilidad con versiones anteriores (no funcionará en angular5/webpack3). No se como arreglarlo bien.

Estoy bastante seguro de que @SebastianM solo necesita actualizar los paquetes en una versión principal, ya que Angular 6 rompe muchas cosas en la compatibilidad con versiones anteriores.

@Epenance sí, eso es lo que probablemente tengo que hacer, lo cual es un poco molesto porque tengo que administrar dos sucursales (porque habrá menos personas en v6 en el corto plazo).

angular-google-maps funciona bien en v6 con rxjs-compat (excepto el comentario de @iget-master), pero la directiva snazzy-info-window está realmente rota en este momento. Quizás la forma más sencilla es cambiar la importación dinámica a estática.

@SebastianM puedes por ahora:

• Actualice el paquete AGM a RXJS6+RXJSCompat
• Dejemos caer el RXJSCompat

Todo el mundo debería estar feliz, ¿no?

@SebastianM sobre dos sucursales, también existe la forma de actualización ngx-translate , una sola sucursal, la última versión solo es compatible con v6, sin compatibilidad angular con versiones anteriores

no digo que sea absolutamente así, solo quería señalar que otra biblioteca importante (en términos de descarga mensual) eligió ese camino 😉

@jimmykane no , ya que rxjs 6 no es compatible con angular 4/5. Creo que tengo una solución... PR está llegando

@peterpeterparker Creo que es razonable admitir las dos últimas versiones, que ahora son angulares 5/6 y encontré una forma compatible con versiones anteriores (que incluso debería funcionar con angular 4 por ahora, pero marcaré la próxima versión con soporte para angular 5/ 6) - Pero feliz de discutirlo más a fondo

@SebastianM no se preocupe en absoluto, solo quería traer la información, estoy contento de todas formas ya que migré mi sitio web a v6 😉

En mi opinión, dado que la migración a Angular 6 es casi indolora (al menos en nuestros proyectos), no veo ninguna razón para mantener una versión para 4 y 5. Solo proporcione correcciones de seguridad peligrosas.

@SebastianM realmente necesita que se actualice de forma nativa

¿Tendremos una versión estable para el soporte de Angular 6? Funciona bien con rxjs-compat, pero me gustaría eliminarlo lo antes posible

Oye... ¿alguna actualización sobre esto?

¡Oh! Acabo de actualizar a Angular 6 y tengo el problema en Snazzy-info-window que está discutiendo:

Error: No capturado (en promesa): TypeError: elems[0] no es un constructor
TypeError: elems[0] no es un constructor
en snazzy-info-window.js:130

¿Tienes alguna idea de cómo arreglar esto?

¡Gracias!

@manuelsanchezaponte por ahora, la solución de @john-hi funciona, cambie la línea 130 a _this._nativeSnazzyInfoWindow = new elems[0].default(options); en node_modules/@agm/snazzy-info-window/directives/snazzy-info-window.js . Esta es una solución temporal mientras el paquete admite angular 6.

@LordShiroe tiene razón, parece una solución rápida. AGM es el último bloqueador en actualizar a v6.

¡Gracias @SebastianM por la solución rápida! trabajando como un encanto. 🥇

Vaya, eres un probador rápido: D, me alegro de que funcione 😅

@SebastianM muchas gracias 👍