Angular-google-maps: Angular6のサポート

コメントはこちら

こんにちは、

プロジェクトを実行しようとしましたが、関連するエラーは次のとおりです。

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マップはRXJS6で壊れ、後方互換性のために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パッケージの使用には注意してください。これは単なる回避策であり、プロジェクトに多くのオーバーヘッドが追加されるためです。 まだRxJS6にアップグレードされていないこのような多くのパッケージが必要ですが、できるだけ早く削除してください。

@epenanceはパッケージを[email protected]に更新するのに素晴らしい仕事をしましたが、Angular6と完全に互換性を持たせる前に、重大な変更がないか確認する必要があると思います。

@ ukon1990角度6はwebpack4を使用するように切り替えました。これにより、commonjsモジュールを動的にインポートする際の動作が変更されました。 理由はわかりませんが、snazzy-info-windowディレクティブが動的インポートsnazzy-info-windowライブラリを使用しているため、警告が1つあり、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では機能しません）。 どうすれば正しく修正できるかわかりません。

Angular 6は後方互換で多くのものを壊すので、 @ SebastianMはパッケージを1つのメジャーバージョンにバンプする必要があると確信しています。

@Epenanceうん、それはおそらく私がしなければならないことです。これは、2つのブランチを管理する必要があるため、少し面倒です（v6を使用する人がすぐに少なくなるため）。

angle-google-mapsは、rxjs-compatを使用するv6では正常に機能します（@ iget-master remarkを除く）が、snazzy-info-windowディレクティブは現在実際に壊れています。 おそらく最も簡単な方法は、動的インポートを静的に変更することです。

@SebastianMあなたは今のところできます：

• AGMパッケージをRXJS6 + RXJSCompatにアップグレードします
• RXJSCompatをドロップしましょう

誰もが幸せでなければなりませんか？

@SebastianM約2つのブランチ、アップグレードするngx-translateの方法もあります。1つのブランチ、最後のリリースはv6とのみ互換性があり、下位互換性はありません。

それが絶対的な方法だと言っているのではなく、別の主要な図書館（毎月のダウンロードに関して）がそのような道を選んだことを指摘したかっただけです😉

@jimmykaneいいえ、rxjs6はangular4 / 5と互換性がないためです。 私は解決策があると思います... PRが来ています

@peterpeterparker最新の2つのバージョンをサポートするのは合理的だと思います。現在はAngular5 / 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);に変更します。 パッケージがAngular6をサポートしている間、これは一時的な解決策です。

@LordShiroeは正しいので、簡単に修正できるようです。 AGMは、v6にアップグレードする最後のブロッカーです。

@SebastianMに感謝します。迅速な修正に感謝します！ 魅力のように働きます。 🥇

あなたは速いテスターです：Dそれがうまくいくことをうれしく思います😅

@SebastianMthxたくさん👍