Angular-google-maps: Prise en charge angulaire 6

Voilà pour les commentaires

Salut,

Je viens d'essayer d'exécuter mon projet, voici les erreurs associées :

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"

J'ai résolu mes problèmes via l'installation
npm install rxjs<strong i="6">@6</strong> rxjs-compat<strong i="7">@6</strong> --save

comme décrit https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md

Les cartes agm rompent avec RXJS 6 et ont besoin du module de compatibilité pour une rétrocompatibilité

J'ai toujours un problème avec "snazzy-info-window" après la mise à niveau d'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)

Et j'ai aussi ce message d'avertissement :
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/

Soyez prudent avec l'utilisation du package rxjs-compat , car il ne s'agit que d'une solution de contournement et ajoutera beaucoup de frais généraux à votre projet. Maintenant, c'est nécessaire en raison de nombreux packages comme celui-ci qui n'ont pas encore été mis à niveau vers RxJS 6, mais supprimez-le dès que possible.

@epenance a fait du bon travail en mettant à jour le package vers [email protected] , mais je pense qu'avant de le rendre entièrement compatible avec Angular6, il faut vérifier s'il y a des changements de rupture.

@ukon1990 l'angular 6 est passé à l'utilisation de webpack 4, qui a changé de comportement lors de l'importation dynamique de modules commonjs. Je ne sais pas pourquoi, mais la directive snazzy-info-window utilise la bibliothèque d'importation dynamique snazzy-info-window, c'est pourquoi il y a un avertissement et une directive snazzy-info-window cassée. Pour le réparer https://github.com/SebastianM/angular-google-maps/blob/1a74b3a9670cf4dbf442033a17dea290dfadc408/packages/snazzy-info-window/directives/snazzy-info-window.ts#L228
devrait être changé en this._nativeSnazzyInfoWindow = new elems[0].default(options); mais ce n'est pas une solution de compatibilité descendante (cela ne fonctionnera pas dans angular5/webpack3). Je ne sais pas comment le réparer correctement.

Je suis à peu près sûr que @SebastianM a juste besoin de supprimer les packages d'une version majeure, car Angular 6 casse beaucoup de choses en rétrocompatibilité.

@Epenance oui , c'est probablement ce que je dois faire, ce qui est un peu ennuyeux car je dois gérer deux branches (car trop moins de gens seront sur la v6 de sitôt).

angular-google-maps fonctionne bien sur v6 avec rxjs-compat (sauf la remarque @iget-master), mais la directive snazzy-info-window est vraiment cassée en ce moment. Peut-être que le moyen le plus simple est de changer l'importation dynamique en statique.

@SebastianM vous pouvez pour l'instant :

• Mettre à niveau le package AGM vers RXJS6 + RXJSCompat
• Laissons tomber le RXJSCompat

Tout le monde devrait être content non ?

@SebastianM à propos de deux branches, il existe également le moyen ngx-translate de mettre à niveau, une seule branche, dernière version uniquement compatible avec la v6, pas de rétrocompatibilité angulaire

Je ne dis pas que c'est absolument le chemin, je voulais juste souligner qu'une autre grande bibliothèque (en termes de téléchargement mensuel) a choisi un tel chemin 😉

@jimmykane non , car rxjs 6 n'est pas compatible avec angular 4/5. Je pense avoir une solution ... PR arrive

@peterpeterparker Je pense qu'il est raisonnable de prendre en charge les deux dernières versions, qui sont maintenant angulaires 5/6 et j'ai trouvé un moyen rétrocompatible (qui devrait même fonctionner avec angulaire 4 pour l'instant mais je signalerai la prochaine version avec prise en charge angulaire 5/ 6) - Mais heureux d'en discuter davantage

@SebastianM pas de soucis du tout, je voulais juste apporter l'info, je suis content de toute façon puisque j'ai déjà migré mon site vers la v6 😉

IMO, étant donné que la migration vers Angular 6 est presque sans douleur (du moins sur nos projets), je ne vois aucune raison de maintenir une version pour 4 et 5. Fournissez simplement des correctifs de sécurité dangereux.

@SebastianM en a vraiment besoin pour être mis à jour nativement

Aurons-nous une version stable pour le support d'Angular 6 ? Fonctionne bien avec rxjs-compat, mais j'aimerais le supprimer dès que possible

Hey..une mise à jour à ce sujet ?

Oh! Je viens de passer à Angular 6 et j'ai le problème sur Snazzy-info-window dont vous parlez :

Erreur : Non détecté (dans la promesse) : TypeError : elems[0] n'est pas un constructeur
TypeError : elems[0] n'est pas un constructeur
sur snazzy-info-window.js : 130

Avez-vous une idée de comment résoudre ce problème?

Merci!

@manuelsanchezaponte pour l'instant, la solution @john-hi fonctionne, changez la ligne 130 en _this._nativeSnazzyInfoWindow = new elems[0].default(options); dans le node_modules/@agm/snazzy-info-window/directives/snazzy-info-window.js . Il s'agit d'une solution temporaire pendant que le package prend en charge angular 6.

@LordShiroe a raison, cela semble être une solution rapide. AGM est le dernier bloqueur à passer à la v6.

Merci @SebastianM pour la solution rapide ! fonctionne comme un charme. 🥇

Whoa tu es un testeur rapide :D content que ça marche 😅

@SebastianM merci beaucoup 👍