Angular-google-maps: Angular 6 支持

这里的评论

你好，

刚刚尝试运行我的项目，这些是相关的错误：

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"

我通过安装解决了我的问题
npm install rxjs<strong i="6">@6</strong> rxjs-compat<strong i="7">@6</strong> --save

如https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md所述

agm 映射与 RXJS 6 中断，它需要 compat 模块以实现向后兼容性

在 Angular 6 升级后，我仍然遇到“snazzy-info-window”的问题。
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)

我也收到了这个警告信息：
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/

小心使用rxjs-compat包，因为它只是一种解决方法，会给您的项目增加很多开销。 现在有必要因为许多像这样的包还没有升级到 RxJS 6，但尽快将其删除。

@epenance将包更新为[email protected]做得很好，但我认为在使其完全兼容 Angular6 之前，需要检查任何重大更改。

@ukon1990 angular 6 切换到使用 webpack 4，它在动态导入 commonjs 模块时改变了行为。 我不知道为什么，但是 snazzy-info-window 指令正在使用动态导入 snazzy-info-window 库，这就是为什么有一个警告和损坏的 snazzy-info-window 指令。 修复它https://github.com/SebastianM/angular-google-maps/blob/1a74b3a9670cf4dbf442033a17dea290dfadc408/packages/snazzy-info-window/directives/snazzy-info-window.ts#L228
应该更改为this._nativeSnazzyInfoWindow = new elems[0].default(options);但它不是向后兼容的解决方案（它在 angular5/webpack3 中不起作用）。 我不知道如何正确修复它。

我很确定@SebastianM只需要将软件包升级为一个主要版本，因为 Angular 6 在向后兼容中破坏了很多东西。

@Epenance是的，这就是我可能要做的，这有点烦人，因为我必须管理两个分支（因为很快就会有更少的人使用 v6）。

angular-google-maps 在带有 rxjs-compat 的 v6 上运行良好（@iget-master 备注除外），但 snazzy-info-window 指令现在真的被破坏了。 也许最简单的方法是将动态导入更改为静态。

@SebastianM你现在可以：

• 升级 AGM 包到 RXJS6+RXJSCompat
• 让我们删除 RXJSCompat

每个人都应该高兴不是吗？

@SebastianM关于两个分支，还有ngx-translate方式升级，一个分支，最后一个版本只兼容v6，没有角度向后兼容

不是说绝对是这样，只是想指出另一个主要库（就每月下载而言）选择了这样的路径😉

@jimmykane不，因为 rxjs 6 与 angular 4/5 不兼容。 我认为有一个解决方案......公关即将到来

@peterpeterparker我认为支持最新的两个版本是合理的，它们现在是 angular 5/6，我找到了一种向后兼容的方式（现在它甚至应该与 angular 4 一起使用，但我将标记下一个支持 angular 5/ 的版本6) - 但很高兴进一步讨论

@SebastianM完全不用担心，只是想提供信息，我对任何方式都很满意，因为我已经将我的网站迁移到 v6 😉

IMO，由于迁移到 Angular 6 几乎没有痛苦（至少在我们的项目中），我认为没有理由维护 4 和 5 的版本。只需提供危险的安全修复。

@SebastianM真的需要原生升级

我们会有一个稳定的 Angular 6 支持版本吗？ 使用 rxjs-compat 工作正常，但我想尽快删除它

嘿..这有什么更新吗？

哦！ 我刚刚升级到 Angular 6，我在 Snazzy-info-window 上遇到了您正在讨论的问题：

错误：未捕获（承诺中）：TypeError：elems [0]不是构造函数
TypeError：elems[0] 不是构造函数
在 snazzy-info-window.js:130

你知道如何解决这个问题吗？

谢谢！

@manuelsanchezaponte现在，@john-hi 解决方案有效，将 node_modules/@agm/snazzy-info-window/directives/snazzy-info-window.js 中的第 130 行更改为_this._nativeSnazzyInfoWindow = new elems[0].default(options); node_modules/@agm/snazzy-info-window/directives/snazzy-info-window.js 。 这是一个临时解决方案，而包支持 Angular 6。

@LordShiroe是对的，这似乎是一个快速的解决方案。 AGM 是升级到 v6 的最后一个阻止程序。

感谢@SebastianM感谢您的快速修复！ 像魅力一样工作。 🥇

哇，你是一个快速的测试者：D 很高兴它有效😅

@SebastianM非常感谢👍