Angular-google-maps: angular-universal support

[hheexx]

Currently plugin can't be used with angular-universal without having completely separate entry points for server and browser because you are touching the DOM just by inclusion of your plugin.

ReferenceError: window is not defined
at Object. (C:\Users\hexbo\Documents\cx_public\node_modules\angular2-google-maps\core\utils\browser-globals.js:11:82)

Can you delay any initialization (touching the DOM) until I call some function?
Maybe calling AgmCoreModule.forRoot() shoud initialize the maps?

[SebastianM]

Maybe @gdi2290 can help here. I have no idea if this is possible.

[Koslun]

@SebastianM Great work with PR #709! Going from your last comment in that PR, this issue can be closed?

Or is there perhaps a need for more testing?

[SebastianM]

@Koslun thx! The initialization is now delayed. But I haven't tested it yet with angular universal.

[inzerceubytovani]

Angular2 universal does not work - Server crash - TypeError: this._elem.nativeElement.querySelector is not a function when try to load page where google map is from universal.

Tomorrow I try to use some conditions isBrowser or isNode to prevent render it by server, hope it will work.

[inzerceubytovani]

Ok I fix it with *ngIf="isBrowser()" on sebm-google-map component. So it works with universal, of course only on client side but I think this is not problem - you don't need to return map from server.

[tuneis]

I'm getting this error when using yeoman aspnetcore-spa generator to create a project with version 2.4.5 of angular.

Exception: Call to Node module failed with error: TypeError: this._elem.nativeElement.querySelector is not a function
at SebmGoogleMap.ngOnInit (C:\Users\rtunis\Desktopgogogo\ClientApp\dist\main-server.js:2139:50)

What is really strange is sometimes the map will load with the marker and everything but then when I refresh the page it just throws that exception again.

[PatrickJS]

querySelector isn't a method on the fake json dom

[viktorstaikov]

Hi guys,

I'm not getting any error, but the map is still not shown.
I'm doing the trick with _isBrowser_ to render it only on the client.
When inspecting the element has some children appended, but not visible.

[paul-plaza]

Hello, how can I solve the problem TypeError: this._elem.nativeElement.querySelector is not a function when try to load page where google map

[dneeleman]

@paulPlaza You should use a *ngIf isBrowser, as this should only be ran on serverside. This will eliminate it from running on node and resulting in the error you described.

[gouthamsaie]

@dneeleman, Can you please let me know what content need to be inside the isBrowser() in Typescript.

[gouthamsaie]

@SebastianM , Whenever page loads with map i am not getting any error. But when i reload the page manually it throws as below:

this._elem.nativeElement.querySelectorAll is not a function at SebmGoogleMap.ngOnInit
Please suggest me the solution to overcome this.

[Koslun]

@gouthamsaie depending on your use-case, a temporary workaround might be to load another page on the server whenever an affected page loads. Such as a page with just a loading indicator.

Can do this by using a canActivate guard which checks if the application is on the browser or server.

Doing this myself for pages which require authentication.

[gouthamsaie]

@Koslun thank you so much for your response. It is only the work around. Cant we have the permanent solution and why it is occuring. If you know please let me know. Anyways appreciate your reply.

[dneeleman]

I have implemented this library also in our Angular Universal project. We use a ngIf with isBrowser with platformID. But our problem is that the component will load with a blue rectangle, and only on hover/click on page the component loads the component and shows the correct Google Map.

Anyone encountered the same issue and solved this?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.