Angular-google-maps: Lazy-Maps-API-Loader-Fehler

Er @ravindranpandu ,

Laden Sie das Google Maps-Skript irgendwo auf der Seite selbst?

Nein, ich importiere es einfach in die Typoskriptdatei. Jedes Mal, wenn ich diese Seite besuche, wird ein Skript-Tag an das HTML angehängt, das auf die Googlemap-API verweist.

In dem oben angehängten Bild sehen Sie, dass das Googlemap-Skript-Tag 7 Mal angehängt wird, was bedeutet, dass ich die Seite 7 Mal besucht habe.

@ravindranpandu hmm, kannst du mir deine bootstrap() Funktion zeigen?

Hallo @SebastianM ,

Um es einfacher zu machen, habe ich eine Beispiel-App erstellt. Sie können das Problem in dieser ionischen App sehen.
https://github.com/ravindranpandu/angular-map

Danke im Voraus

Versuchen Sie mehr als einmal, die Kartenseite zu besuchen. Sie erhalten das Problem, über das ich gesprochen habe.

You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

Ich bin nicht sicher, warum dies geschieht. Bitte lassen Sie mich wissen, was falsch sein könnte.

Vielen Dank

@ravindranpandu diese Zeile ist der Grund:
https://github.com/ravindranpandu/angular-map/blob/master/app/pages/map/map.ts#L14

Sie erstellen mehrere Instanzen des Kartenladeprogramms, wenn Sie die ANGULAR2_GOOGLE_MAPS_PROVIDERS an dieser Stelle einfügen.

Sie müssen ANGULAR2_GOOGLE_MAPS_PROVIDERS in Ihrer bootstrap () -Methode verwenden.

@SebastianM Ich habe jetzt die ANGULAR2_GOOGLE_MAPS_PROVIDERS im Hauptanbieter von app.ts initialisiert. Jetzt funktioniert es wie erwartet, danke für Ihre Zeit.

Dies scheint auch zu passieren, wenn ich angle2-google-maps in einem Feature-Modul anstelle des Root-App-Moduls verwende. Kann jemand bestätigen?

In Ihren app.module.ts-Importen fügen Sie Folgendes hinzu:

AgmCoreModule.forRoot({ apiKey: 'xxxxxx', libraries: ['places'] })

(Natürlich können Sie Bibliotheken entfernen: ['Orte'])

und dann in einem gemeinsam genutzten Modul hinzufügen:
bei Importen
AgmCoreModule
und im Export:
AgmCoreModule

dann ist die
You have included the Google Maps API multiple times on this page. This may cause unexpected errors. wird weg sein

Leute, weiß jemand, wie wir jetzt mit faulem Laden arbeiten?
GOOGLE_MAPS_PROVIDERS ist veraltet und wir verwenden stattdessen AgmCoreModule, das jedes Mal geladen wird, wenn API-Bibliotheken geladen werden, wenn ein Modul geladen wird.

@szykov Die Lösung für die Verwendung dieser angle2-Komponente in einem faul geladenen Submodul besteht darin, das zu tun, was @efstathiosntonas gesagt hat

Fügen Sie zunächst in Ihrem Haupt app.module.ts die API ein

// app.module.ts
import { AgmCoreModule } from 'angular2-google-maps/core';

//other stuff here

@NgModule({
   bootstrap: [AppComponent],
   declarations: [ //  declarations contains: components, directives and pipes],
   imports: [ // import other modules here
        AgmCoreModule.forRoot({
            apiKey: 'YOUR_KEY'
       })],
   providers: [ // expose our Services and Providers into Angular's dependency injection]
})

Fügen Sie es dann erneut in Ihr Submodul ein, jedoch ohne den API-Schlüssel

// maps.module.ts (submodule)
import { AgmCoreModule } from 'angular2-google-maps/core';

// other stuff

@NgModule({
   imports: [ // other imports here
      AgmCoreModule
   ],
   declarations: [ // Components / Directives / Pipes
      MapComponent
   ]
})

Jetzt wird die Angular2-Maps-Komponente verzögert geladen und das Javascript nur einmal angefordert. Ich habe dies mit Webpack 2 gemacht und es funktioniert gut. Danke Jungs für die gute Arbeit hier.

@IAMtheIAM danke. Meine Grüße auch an @efstathiosntonas 🥇

Wenn Sie es irgendwo in der Indexdatei oder woanders erneut aufrufen, müssen Sie es entfernen.
Sie müssen es nur einmal in Ihrem Projekt aufrufen.

Hallo Leute, weiß jemand, wie man einen Ort findet, an dem ich zum zweiten Mal Karten aufgenommen habe?
Wenn die erste Seite, die ich besuche, eine Karte hat, kann ich sie nicht sehen. Aber wenn Seite mit Karte, die ich nicht zuerst besuche, ist es in Ordnung.
Vielen Dank

Ohne ein Codebeispiel wird es schwierig sein, Ihnen bei Riasets zu helfen

Repo-Link: https://github.com/Riasets/test
Entschuldigung für den beschissenen Code
@IAMtheIAM

Login: [email protected]
Passwort: test1234

@ Riasets Ich habe Ihre App geklont und ausgeführt, sieht sehr gut aus. Nach dem Anmelden wird die Karte sofort geladen, und wenn ich zu einer anderen Seite wechsle, wird die Karte auch gut geladen. Ich sehe kein Problem, können Sie mehr klären?

Die @ IAMtheIAM-Anmeldeseite war die erste und die Kartenseite die zweite. In diesem Fall wird die Karte geladen. Wenn Sie jedoch bereits eine Autorisierung durchgeführt haben und beispielsweise versuchen, zur / Homepage zu gelangen, wird die Karte nicht geladen. Oder versuchen Sie, die Seite mit der Karte neu zu laden. Sie wird auch nicht geladen. Und auch Sie können bei dev tools 2 die gleichen Skripte mit Google Maps sehen