9

I have an application that uses Angular Google Maps to show a location. At the beginning I was able to show the map, but since a while (probably I have modified something) I am getting the following error:

ERROR Error: Uncaught (in promise): Error: StaticInjectorError[NgZone]: 
StaticInjectorError[NgZone]: 
NullInjectorError: No provider for NgZone!
at _NullInjector.get (core.js:923)
at resolveToken (core.js:1211)
at tryResolveToken (core.js:1153)
at StaticInjector.get (core.js:1024)
at resolveToken (core.js:1211)
at tryResolveToken (core.js:1153)
at StaticInjector.get (core.js:1024)
at resolveNgModuleDep (core.js:10585)
at NgModuleRef_.get (core.js:11806)
at resolveDep (core.js:12302)
at _NullInjector.get (core.js:923)
at resolveToken (core.js:1211)
at tryResolveToken (core.js:1153)
at StaticInjector.get (core.js:1024)
at resolveToken (core.js:1211)
at tryResolveToken (core.js:1153)
at StaticInjector.get (core.js:1024)
at resolveNgModuleDep (core.js:10585)
at NgModuleRef_.get (core.js:11806)
at resolveDep (core.js:12302)
at resolvePromise (zone.js:824)
at resolvePromise (zone.js:795)
at eval (zone.js:873)
at ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.js:4620)
at ZoneDelegate.invokeTask (zone.js:424)
at Zone.runTask (zone.js:192)
at drainMicroTaskQueue (zone.js:602)
at <anonymous>

My code is: app.module.ts:

import { AgmCoreModule } from '@agm/core';

imports AgmCoreModule.forRoot({apiKey:'...'})

mycomponent.html

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
    <agm-marker [latitude]="lat" [longitude]="lng">
        <agm-info-window>
            <div>
                my text
            </div>
        </agm-info-window>
    </agm-marker>

I would really appreciate your help!

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
Ivett
  • 111
  • 1
  • 3
  • You can follow the stack and check where the error takes place. Currently you're the only person who can do that. Consider providing a way to replicate the problem - a plunk, stackblitz, etc. – Estus Flask Dec 17 '17 at 21:31
  • 1
    Hi, I am interested in this. Did you find any way to fix the issue ? – Deunz Dec 21 '17 at 16:11
  • `zone`'s included in most apps in `polyfills.ts`. `polyfills.ts` is included by `angular.json`. Have you modified either of these files? – adamdport Oct 25 '18 at 18:37
  • has anyone solved this yet? I'm encountering the exact same error. – David McSpadden Nov 06 '19 at 16:27

2 Answers2

3

You can provide NgZone manually:

import { NgZone } from '@angular/core';

@NgModule({
    providers: [
        // ...
        { provide: NgZone, useFactory: () => new NgZone({}) }
    ]
})
Anton Poznyakovskiy
  • 2,109
  • 1
  • 20
  • 38
0

You need to add peerDependencies with all the libraries you are using using.

Also check by removing each Module from your imports to see which one is causing the issue. This link should help.

Sajeetharan
  • 216,225
  • 63
  • 350
  • 396