Angular 6 Support #1384

iget-master · 2018-04-24T17:07:55Z

Issue description

Currently this package requires @angular/common@^4.0.0 || ^5.0.0 and @angular/core@^4.0.0 || ^5.0.0. I think that the changes are not so relevant, so probably the migration to support angular 6 is easy.

The main issue that I've found is about the RxJS change to v6.0.0, where some modules changes the path, so we need to update it.

It also might need the release of a 2.0.0 version, since there are many breaking changes on package dependencies

The text was updated successfully, but these errors were encountered:

jimmykane · 2018-04-27T10:28:40Z

Here for the comments

agil-NUBBA · 2018-05-04T09:24:41Z

Hi,

Just tried to run my project, these are the related errors:

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"

jimmykane · 2018-05-04T11:01:07Z

I solved my issues via installing
npm install rxjs@6 rxjs-compat@6 --save

as described https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md

The agm maps breaks with RXJS 6 and it needs the compat module for backwards compatability

ukon1990 · 2018-05-04T13:23:32Z

I still have an issue with "snazzy-info-window" after the Angular 6 upgrade.
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)

And I also get this warning message:
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/

iget-master · 2018-05-07T14:37:05Z

Be careful with the usage of rxjs-compat package, since it's just an workaround and will add a lot of overhead to your project. Now it's necessary due many packages like this that didn't upgraded to RxJS 6 yet, but remove it as soon as possible.

@Epenance did a nice job updating the package to rxjs@6.1.0, but I think that before making it fully Angular6 compatible, need to check for any breaking changes.

john-hi · 2018-05-07T17:46:48Z

@ukon1990 the angular 6 switched to use webpack 4, which changed behavior while dynamic importing commonjs modules. I don't know why but snazzy-info-window directive is using dynamic import snazzy-info-window library, that's why there are one warning and broken snazzy-info-window directive. To fix it https://github.com/SebastianM/angular-google-maps/blob/1a74b3a9670cf4dbf442033a17dea290dfadc408/packages/snazzy-info-window/directives/snazzy-info-window.ts#L228
should be changed to this._nativeSnazzyInfoWindow = new elems[0].default(options); but it is not backward compatibility solution (it won't work in angular5/webpack3). I don't know how fix it right.

Epenance · 2018-05-07T18:07:50Z

I'm pretty sure @SebastianM just needs to bump the packages one major version as Angular 6 breaks a lot of stuff in backwards compat.

sebholstein · 2018-05-07T18:09:51Z

@Epenance yep, that's what I probably have to do, which is a little bit annoying because I have to manage two branches (because too less people will be on v6 any time soon).

john-hi · 2018-05-07T18:41:45Z

angular-google-maps works fine on v6 with rxjs-compat (except @iget-master remark), but snazzy-info-window directive is really broken right now. Maybe the simplest way is changing dynamic import to static.

jimmykane · 2018-05-07T19:10:22Z

@SebastianM you can for now:

Upgrade AGM package to RXJS6+RXJSCompat
Let us drop the RXJSCompat

Everyone should be happy no?

peterpeterparker · 2018-05-07T19:20:34Z

@SebastianM about two branches, there is also the ngx-translate way to upgrade, one single branch, last release only compatible with v6, no angular backwards compatibility

not saying that's absolutely the way, just wanted to point out that another major library (in terms of monthly download) choosed such a path 😉

sebholstein · 2018-05-07T19:20:53Z

@jimmykane nope, as rxjs 6 is not compatible with angular 4/5. I think a have a solution...PR is coming

sebholstein · 2018-05-07T19:22:44Z

@peterpeterparker I think it's reasonable to support the latest two version, which are now angular 5/6 and I found a backwards compatible way (that should even work with angular 4 for now but I will flag the next version with support for angular 5/6) - But happy to discuss it further

peterpeterparker · 2018-05-07T19:25:03Z

@SebastianM no worries at all, just wanted to bring the info, I'm happy with any way since I already migrated my website to v6 😉

iget-master · 2018-05-07T21:00:35Z

IMO, since the migration to Angular 6 is almost pain-less (at least on our projects), I see no reason for maintaining a version for 4 and 5. Just provide dangerous security fixes.

andregomars · 2018-05-08T03:34:31Z

@SebastianM really needs it to be upgraded natively

semoal · 2018-05-08T08:30:44Z

Will we have an stable release for Angular 6 support? Working ok with rxjs-compat, but I'll like to remove it asap

nitinht1988 · 2018-05-09T04:41:23Z

Hey..any update on this?

manuelsanchezaponte · 2018-05-10T18:18:37Z

Oh! I just upgrade to Angular 6 and I have the problem on Snazzy-info-window you are discussing:

Error: Uncaught (in promise): TypeError: elems[0] is not a constructor
TypeError: elems[0] is not a constructor
at snazzy-info-window.js:130

Do you have any idea how to fix this?

Thank you!

LordShiroe · 2018-05-17T14:27:57Z

@manuelsanchezaponte for now, the @john-hi solution works, change the line 130 to _this._nativeSnazzyInfoWindow = new elems[0].default(options); in the node_modules/@agm/snazzy-info-window/directives/snazzy-info-window.js. This is a temporary solution while the package supports angular 6.

attilacsanyi · 2018-05-18T22:50:32Z

@LordShiroe are right that seems a quick fix. AGM is the last blocker to upgrade to v6.

attilacsanyi · 2018-05-24T20:08:38Z

Thanks @SebastianM appreciate for the quick fix! working like a charm. 🥇

sebholstein · 2018-05-24T20:11:07Z

Whoa you're a fast tester :D glad it works 😅

peterpeterparker · 2018-05-25T05:32:36Z

@SebastianM thx a lot 👍

Epenance mentioned this issue May 7, 2018

chore(core): Upgrade rxjs version to 6.1.0 #1395

Closed

sebholstein mentioned this issue May 7, 2018

Angular 6 support #1396

Merged

explooosion mentioned this issue May 9, 2018

Angular 6 not supported explooosion/Agm-Direction#20

Closed

sebholstein mentioned this issue May 23, 2018

Angular 6 update #1402

Closed

n00dl3 mentioned this issue May 24, 2018

Angular 6.0.1 its not working #1410

Closed

sebholstein closed this as completed in #1396 May 24, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Angular 6 Support #1384

Angular 6 Support #1384

iget-master commented Apr 24, 2018 •

edited

jimmykane commented Apr 27, 2018

agil-NUBBA commented May 4, 2018 •

edited

jimmykane commented May 4, 2018

ukon1990 commented May 4, 2018 •

edited

iget-master commented May 7, 2018

john-hi commented May 7, 2018 •

edited

Epenance commented May 7, 2018

sebholstein commented May 7, 2018

john-hi commented May 7, 2018 •

edited

jimmykane commented May 7, 2018 •

edited

peterpeterparker commented May 7, 2018 •

edited

sebholstein commented May 7, 2018

sebholstein commented May 7, 2018

peterpeterparker commented May 7, 2018

iget-master commented May 7, 2018

andregomars commented May 8, 2018

semoal commented May 8, 2018

nitinht1988 commented May 9, 2018

manuelsanchezaponte commented May 10, 2018

LordShiroe commented May 17, 2018

attilacsanyi commented May 18, 2018 •

edited

attilacsanyi commented May 24, 2018

sebholstein commented May 24, 2018

peterpeterparker commented May 25, 2018

Angular 6 Support #1384

Angular 6 Support #1384

Comments

iget-master commented Apr 24, 2018 • edited

jimmykane commented Apr 27, 2018

agil-NUBBA commented May 4, 2018 • edited

jimmykane commented May 4, 2018

ukon1990 commented May 4, 2018 • edited

iget-master commented May 7, 2018

john-hi commented May 7, 2018 • edited

Epenance commented May 7, 2018

sebholstein commented May 7, 2018

john-hi commented May 7, 2018 • edited

jimmykane commented May 7, 2018 • edited

peterpeterparker commented May 7, 2018 • edited

sebholstein commented May 7, 2018

sebholstein commented May 7, 2018

peterpeterparker commented May 7, 2018

iget-master commented May 7, 2018

andregomars commented May 8, 2018

semoal commented May 8, 2018

nitinht1988 commented May 9, 2018

manuelsanchezaponte commented May 10, 2018

LordShiroe commented May 17, 2018

attilacsanyi commented May 18, 2018 • edited

attilacsanyi commented May 24, 2018

sebholstein commented May 24, 2018

peterpeterparker commented May 25, 2018

iget-master commented Apr 24, 2018 •

edited

agil-NUBBA commented May 4, 2018 •

edited

ukon1990 commented May 4, 2018 •

edited

john-hi commented May 7, 2018 •

edited

john-hi commented May 7, 2018 •

edited

jimmykane commented May 7, 2018 •

edited

peterpeterparker commented May 7, 2018 •

edited

attilacsanyi commented May 18, 2018 •

edited