Angular-google-maps: Suporte Angular 6

Aqui para os comentários

Oi,

Apenas tentei executar meu projeto, estes são os erros 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"

Resolvi meus problemas instalando
npm install rxjs<strong i="6">@6</strong> rxjs-compat<strong i="7">@6</strong> --save

conforme descrito https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md

Os mapas agm quebram com o RXJS 6 e precisam do módulo compat para compatibilidade com versões anteriores

Ainda tenho um problema com "snazzy-info-window" após a atualização do 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)

E também recebo esta mensagem de aviso:
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/

Tenha cuidado com o uso do pacote rxjs-compat , pois é apenas uma solução alternativa e adicionará muita sobrecarga ao seu projeto. Agora é necessário devido a muitos pacotes como este que ainda não foram atualizados para o RxJS 6, mas removê-lo o mais rápido possível.

@epenance fez um bom trabalho atualizando o pacote para [email protected] , mas acho que antes de torná-lo totalmente compatível com Angular6, é necessário verificar se há alterações importantes.

@ ukon1990 o angular 6 mudou para usar o webpack 4, que mudou o comportamento durante a importação dinâmica de módulos commonjs. Eu não sei por que, mas a diretiva snazzy-info-window está usando a biblioteca snazzy-info-window de importação dinâmica, é por isso que há um aviso e uma diretiva snazzy-info-window quebrada. Para corrigi-lo https://github.com/SebastianM/angular-google-maps/blob/1a74b3a9670cf4dbf442033a17dea290dfadc408/packages/snazzy-info-window/directives/snazzy-info-window.ts#L228
deve ser alterado para this._nativeSnazzyInfoWindow = new elems[0].default(options); mas não é uma solução de compatibilidade com versões anteriores (não funcionará em angular5/webpack3). Não sei como consertar direito.

Tenho certeza de que o @SebastianM só precisa aumentar os pacotes em uma versão principal, pois o Angular 6 quebra muitas coisas na compatibilidade com versões anteriores.

@Epenance sim, é isso que eu provavelmente tenho que fazer, o que é um pouco chato porque eu tenho que gerenciar duas ramificações (porque muito menos pessoas estarão na v6 em breve).

angular-google-maps funciona bem na v6 com rxjs-compat (exceto @iget-master comentário), mas a diretiva snazzy-info-window está realmente quebrada agora. Talvez a maneira mais simples seja alterar a importação dinâmica para estática.

@SebastianM você pode por enquanto:

• Atualize o pacote AGM para RXJS6+RXJSCompat
• Vamos largar o RXJSCompat

Todo mundo deveria estar feliz não?

@SebastianM sobre duas ramificações, há também a maneira ngx-translate de atualizar, uma única ramificação, última versão compatível apenas com v6, sem compatibilidade angular com versões anteriores

não dizendo que é absolutamente o caminho, só queria salientar que outra grande biblioteca (em termos de download mensal) escolheu esse caminho 😉

@jimmykane não, pois o rxjs 6 não é compatível com o angular 4/5. Eu acho que tem uma solução... PR está chegando

@peterpeterparker Acho razoável suportar as duas versões mais recentes, que agora são angulares 5/6 e encontrei uma maneira compatível com versões anteriores (que deve funcionar até com angular 4 por enquanto, mas vou sinalizar a próxima versão com suporte para angular 5/ 6) - Mas feliz em discutir mais

@SebastianM não se preocupe, só queria trazer as informações, fico feliz de qualquer forma já que já migrei meu site para v6 😉

IMO, como a migração para o Angular 6 é quase indolor (pelo menos em nossos projetos), não vejo razão para manter uma versão para 4 e 5. Apenas forneça correções de segurança perigosas.

@SebastianM realmente precisa ser atualizado nativamente

Teremos uma versão estável para suporte ao Angular 6? Trabalhando bem com rxjs-compat, mas gostaria de removê-lo o mais rápido possível

Hey .. qualquer atualização sobre isso?

Oh! Acabei de atualizar para o Angular 6 e tenho o problema na janela Snazzy-info que você está discutindo:

Erro: Uncaught (na promessa): TypeError: elems[0] não é um construtor
TypeError: elems[0] não é um construtor
em snazzy-info-window.js:130

Você tem alguma ideia de como consertar isso?

Obrigada!

@manuelsanchezaponte por enquanto, a solução @john-hi funciona, mude a linha 130 para _this._nativeSnazzyInfoWindow = new elems[0].default(options); no node_modules/@agm/snazzy-info-window/directives/snazzy-info-window.js . Esta é uma solução temporária enquanto o pacote suporta angular 6.

@LordShiroe estão certos, parece uma solução rápida. AGM é o último bloqueador a atualizar para a v6.

Obrigado @SebastianM agradeço pela solução rápida! funcionando como um encanto. 🥇

Uau, você é um testador rápido: D que bom que funciona 😅

@SebastianM muito obrigado 👍