Angular-google-maps: 각도 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와 호환되지 않습니다. 해결책이 있는 것 같아요...PR이 오고 있어요

@peterpeterparker 나는 현재 5/6 각도인 최신 두 버전을 지원하는 것이 합리적이라고 생각하며 이전 버전과 호환되는 방법을 찾았습니다(지금은 각도 4에서도 작동해야 하지만 각도 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); 로 변경합니다. 패키지가 angular 6을 지원하는 동안 이것은 임시 솔루션입니다.

@LordShiroe 가 맞습니다. 빠른 수정인 것 같습니다. AGM은 v6으로 업그레이드하는 마지막 차단기입니다.

감사 합니다 @SebastianM 빠른 수정에 감사드립니다! 매력처럼 작동합니다. 🥇

와 당신은 빠른 테스터입니다 :D 작동하는 것이 기쁘다 😅

@SebastianM thx 많이 👍