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.

У меня все еще есть проблема с «snazzy-info-window» после обновления 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)

И я также получаю это предупреждающее сообщение:
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 переключился на использование веб-пакета 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 отлично работает на v6 с rxjs-compat (за исключением замечания @iget-master), но директива snazzy-info-window действительно не работает прямо сейчас. Возможно, самый простой способ — изменить динамический импорт на статический.

@SebastianM , теперь вы можете:

• Обновите пакет AGM до RXJS6+RXJSCompat
• Давайте отбросим RXJSCompat

Все должны быть счастливы, нет?

@SebastianM о двух ветках, есть также способ обновления ngx-translate , одна единственная ветка, последний выпуск совместим только с v6, без обратной совместимости angular

не говорю, что это абсолютно так, просто хотел указать, что другая крупная библиотека (с точки зрения ежемесячной загрузки) выбрала такой путь 😉

@jimmykane нет, так как rxjs 6 не совместим с angular 4/5. Я думаю, что есть решение ... грядет PR

@peterpeterparker Я думаю, что разумно поддерживать последние две версии, которые теперь являются угловыми 5/6, и я нашел обратно совместимый способ (который пока должен работать даже с угловым 4, но я буду отмечать следующую версию с поддержкой углового 5/ 6) - Но с удовольствием обсудим это дальше

@SebastianM не беспокойтесь, просто хотел сообщить информацию, я доволен любым способом, так как я уже перенес свой сайт на v6 😉

ИМО, поскольку переход на Angular 6 почти безболезненный (по крайней мере, в наших проектах), я не вижу причин поддерживать версию для 4 и 5. Просто предоставьте опасные исправления безопасности.

@SebastianM действительно нуждается в обновлении изначально

Будет ли у нас стабильная версия с поддержкой Angular 6? Работает нормально с rxjs-compat, но я хотел бы удалить его как можно скорее.

Эй... какие-нибудь обновления по этому поводу?

Ой! Я только что обновился до Angular 6, и у меня возникла проблема с Snazzy-info-window, которую вы обсуждаете:

Ошибка: Uncaught (в обещании): TypeError: elems[0] не является конструктором
TypeError: elems[0] не является конструктором
на шикарном-информационном-окне.js: 130

У вас есть идеи, как это исправить?

Спасибо!

@manuelsanchezaponte на данный момент, решение @john-hi работает, измените строку 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 большое спасибо 👍