Ich weiß, dass dieses Problem anderen passiert ist, aber ich stecke seit Tagen ziemlich fest und kann keine Lösung finden.
Hier ist mein @NgModule :
import { NgModule } from '@angular/core';
import { AgmCoreModule } from 'angular2-google-maps/core/index';
// Global vars
import appGlobals = require('./../globals');
@NgModule({
imports: [ AgmCoreModule.forRoot({
apiKey: appGlobals.googleMapsApiKey
}) ],
})
export class JobSearchModule {}
Hier ist mein HTML:
<div class="col-md-12 google-maps-container">
<sebm-google-map [latitude]="mapLat"
[longitude]="mapLng"
[mapDraggable]="false"
[zoom]="zoom"
[zoomControl]="false"
[streetViewControl]="false"
(mapClick)="mapClicked($event)">
<sebm-google-map-marker [latitude]="mapLat"
[longitude]="mapLng">
</sebm-google-map-marker>
</sebm-google-map>
</div>
Und hier ist ein Screenshot von dem, was ich in meinem HTML-Head-Tag habe:
Es sieht also so aus, als würde es die API wirklich zweimal enthalten, aber ich weiß nicht warum oder wie.
@escarabin das Problem ist, dass Sie das Modul in ein untergeordnetes Modul Ihrer App importieren. Sie müssen es in Ihr Root-Modul der App importieren. Das Schließen, da dies kein Fehler ist. Fühlen Sie sich frei, wieder zu öffnen. Vielen Dank!
Hallo @SebastianM! Danke für den Rat, aber ich stehe immer noch vor dem Problem.
Hier meine Konfiguration:
job-search-module.ts
verwendenshared.module.ts
, das alle Komponenten und Module enthält, die ich in mehreren anderen Modulen verwende.app.module.ts
Wenn ich jetzt AgmCoreModule in meine app.module.ts importiere, sehe ich einen Fehler, der besagt, dass sebm-google-map
kein Teil meiner job-search-module.ts
ist und keine Karte angezeigt wird.
Wenn ich AgmCoreModule entweder in shared.module.ts
oder in job-search.module.ts
importiere, sehe ich _"Sie haben das Google Maps-API mehrfach auf dieser Seite eingebunden"_.
Was sollte ich dann tun?
PS: Ich habe keine Möglichkeit, das Problem erneut zu öffnen
jeder? :( Ich stecke gerade ziemlich fest damit
@escarabin Ich hatte ein ähnliches Problem. Versuche dies.
Sie müssen Karten in das Root-Anwendungsmodul importieren, also gehen Sie so vor:
@NgModule({
declarations: [
...
],
imports: [
...,
AgmCoreModule.forRoot({
apiKey: 'some key here'
})
],
Aber wenn Sie Karten in einer Komponente verwenden möchten, die nicht zu diesem Modul gehört, gehen Sie zu diesem Modul und tun Sie Folgendes:
@NgModule({
declarations: [
SomeComponentThatHasMapsInItsHtml,
.....
],
imports: [
AgmCoreModule,
...
],
Um hinzuzufügen, warum ich denke, dass dies funktioniert, liegt daran, dass Sie das Ding im Stammverzeichnis Ihrer Anwendung registrieren müssen (damit Google-Zeug mit Ihrem Schlüssel initialisiert wird).
Aber Sie verwenden <seb-maps-smth-smth>
in einer Komponente, die zu einem anderen Modul gehört, also müssen Sie das AgmCoreModule als Import hinzufügen, damit es eine exportierte Komponente in diesem Modul finden kann, die den Selektor seb-maps-smth-smth
hat.
Hoffe das löst das Problem
Vielen Dank für die Mühe @EddyP23 , aber leider sehe ich den Fehler immer noch ... funktioniert es wirklich auf Ihrer Seite mit [email protected] ? Es ist sehr seltsam.
Das Problem ist nicht der Fehler selbst, sondern verursacht auch eine Reihe völlig zufälliger Fehler auf der Seite ...
Außerdem redest du von <seb-maps-smth-smth>
. Ich verwende dieses Tag nicht und sehe es nicht in den Dokumenten. Ich verwende <sebm-google-map>
@escarabin Ja, ich verwende Version 0.15.0.
Mit etw etw meine ich jeden seb-maps-{placeholder}
Selektor. Mein HTML sieht so aus:
<sebm-google-map #sebmGoogleMap
[latitude]="myVar1"
[longitude]="myVar2"
(idle)='onIdle()'
[zoom]='mapZoomLevel'
[streetViewControl]='false'
>
<sebm-google-map-marker #marker
[latitude]="myVar3"
[longitude]="myVar4"
></sebm-google-map-marker>
</sebm-google-map>
Welchen Fehler sehen Sie jetzt? Ich glaube, dass dieses Setup funktionieren sollte. Könnten Sie mehr Code teilen?
Ich sehe immer noch den Fehler "Sie haben das Google Maps-API mehrfach auf dieser Seite eingebunden".
Mein HTML sieht so aus:
<sebm-google-map #sebmGoogleMap
[latitude]="mapLat"
[longitude]="mapLng"
[mapDraggable]="false"
[zoom]="zoom"
[zoomControl]="false"
[streetViewControl]="false"
(mapClick)="mapClicked($event)">
<sebm-google-map-marker [latitude]="mapLat"
[longitude]="mapLng">
</sebm-google-map-marker>
</sebm-google-map>
Hier ist mein untergeordnetes Modul:
import { NgModule } from '@angular/core';
import { jobSearchRouting } from './job-search.routes';
import { SharedModule } from './../shared/shared.module';
import { AgmCoreModule } from 'angular2-google-maps/core/index';
// Components
import { SearchComponent } from './components/search.component';
@NgModule({
declarations: [ SearchComponent ],
imports: [ jobSearchRouting,
AgmCoreModule,
SharedModule ]
})
export class JobSearchModule {}
und mein app.module.ts @NgModule :
@NgModule({
declarations: [ AppComponent,
HomeComponent,
HeaderComponent,
FooterComponent,
PostComponent,
ClubComponent,
CandidateSignUpComponent,
PostPreviewComponent,
SignInComponent,
ProfileSubHeaderComponent,
RecruiterPromoComponent,
NotificationsComponent ],
imports: [ RouterModule,
HttpModule,
SharedModule,
BrowserModule,
AgmCoreModule.forRoot({
apiKey: appGlobals.googleMapsApiKey
}),
MetaModule.forRoot(metaConfig),
routing ],
providers: [ NotificationsService,
MetaService ],
bootstrap: [ AppComponent ],
})
Hm.. Das ist komisch. Sind Sie sicher, dass Sie keine Skript-Tags haben, die Google Maps irgendwo (z. B. in index.html
) auf die alte Weise importieren? Etwas wie das:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Ich würde auch alle Verwendungen von AgmCoreModule
durchgehen, um zu überprüfen, ob Sie es nicht versehentlich zweimal an einem anderen Ort importieren.
Ich habe auch dieses Problem. Ich habe das AgmCoreModule.forRoot({...}) im app.module für meine Komponenten hinzugefügt und nach mehreren Google-API-Aufrufen gesucht.
Gibt immer noch den gleichen Fehler zurück.
Ich habe auch dieses Problem. Ich habe auch das AgmCoreModule.forRoot({...}) im app.module für meine Komponenten hinzugefügt, und ich habe auch nach mehreren Google-API-Aufrufen gesucht.
Ok, mein Fehler, wenn es jemand anderem hier hilft - versuchen Sie, Ihr altes Skript-Tag zu löschen, anstatt es auszukommentieren. Aus irgendeinem Grund war das Kommentieren in der Vorlage nicht das Entfernen.
@EddyP23 , Was kann ich tun, wenn ich skd autocomplete und agm maps verwende?
Da es in den Index importiert
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
Leider kann ich just delete your old script tag
nicht, weil wir einige Legacy-Teile unserer App haben, die das Vorhandensein des script-Tags erfordern. Ich würde vorschlagen, dass der Lazy Loader vor dem Abrufen überprüft, ob die API-Bibliothek vorhanden ist. Ich stecke gerade irgendwie fest und muss wahrscheinlich die Quelle bearbeiten.
Unten ist mein ziemlich fieser Hack, damit a) ältere Abhängigkeiten, die davon ausgehen, dass die API statisch über ein fest codiertes <script src=""
-Tag eingebunden ist, weiterhin funktionieren und b) der You have included the Google Maps API multiple times on this page
-Fehler vermieden wird.
Implementieren Sie die Überschreibungen
import { ModuleWithProviders } from '@angular/core';
import { AgmCoreModule } from '@agm/core';
import { MapsAPILoader } from '@agm/core/services/maps-api-loader/maps-api-loader';
import { LazyMapsAPILoaderConfigLiteral } from '@agm/core/services/maps-api-loader/lazy-maps-api-loader';
export class AgmCoreOverrideModule {
static forRoot(lazyMapsAPILoaderConfig?: LazyMapsAPILoaderConfigLiteral): ModuleWithProviders {
var module = AgmCoreModule.forRoot(lazyMapsAPILoaderConfig);
// This is the magical path to what we need to override.
// Future releases of Agm Core may totally break this.
let provider: any = module.providers[2];
provider.useClass = IgnoreIncludingApiLoader;
return module;
}
}
export class IgnoreIncludingApiLoader extends MapsAPILoader {
load(): Promise<void> {
// Do absolutely nothing.
return new Promise<void>(resolve => resolve());
}
}
Verdrahten Sie es in app.module
@NgModule({
imports: [
AgmCoreOverrideModule.forRoot({
apiKey: '<key>' // Not really needed.
})
],
...
Ich habe viele Tage lang versucht, dieses Problem zu lösen, und schließlich bin ich zu der Lösung gekommen, indem ich alle Moduldateien im Projekt verglichen habe.
Bitte überprüfen Sie alle Module in Ihrem Paket.
Wenn Sie den folgenden Code in mehreren Modulen finden, löschen Sie ihn und behalten Sie ihn nur in einem Modul.
<br i="8"/>
platformBrowserDynamic().bootstrapModule(AppModule)<br i="9"/>
.catch(err => console.log(err));<br i="10"/>
Es ist besser, nur in main.ts zu bleiben
Hoffe, diese Lösung hilft euch
Ich konnte das Problem in dem escenario lösen, das @escarabin beschreibt, das Modul zu überschreiben.
import { ModuleWithProviders, Inject, Optional, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AgmCoreModule, LAZY_MAPS_API_CONFIG, MapsAPILoader } from '@agm/core';
import { LazyMapsAPILoader, LazyMapsAPILoaderConfigLiteral } from '@agm/core/services/maps-api-loader/lazy-maps-api-loader';
import { WindowRef, DocumentRef, BROWSER_GLOBALS_PROVIDERS } from '@agm/core/utils/browser-globals';
@NgModule({ imports: [CommonModule, AgmCoreModule], exports: [AgmCoreModule]})
export class AgmOverrideModule {
static forRoot(lazyMapsAPILoaderConfig?: LazyMapsAPILoaderConfigLiteral): ModuleWithProviders {
return {
ngModule: AgmOverrideModule, providers: [BROWSER_GLOBALS_PROVIDERS, { provide: MapsAPILoader, useClass: ApiLoader },
{ provide: LAZY_MAPS_API_CONFIG, useValue: lazyMapsAPILoaderConfig } ]}
}
}
export class ApiLoader extends LazyMapsAPILoader {
private static cargado: boolean;
constructor( @Optional() @Inject(LAZY_MAPS_API_CONFIG) config: any, @Inject(WindowRef) w: WindowRef, @Inject(DocumentRef) d: DocumentRef) {
super(config, w, d);
}
load(): Promise<void> {
if (ApiLoader.cargado) {
return new Promise<void>(resolve => resolve());
} else {
return new Promise<void>((resolve, reject) => {
super.load()
.then(() => {
ApiLoader.cargado = true;
resolve();
})
.catch(err => {
reject(err);
});
});
}
}
}
Und Importieren des Moduls in das gemeinsam genutzte Modul
@NgModule({
imports: [
...
AgmOverrideModule.forRoot({
apiKey: environment.claveMaps
}),
...
export class ComunModule
Und im faul geladenen Modul
```
@NgModule({
Importe: [
ComunModul,
AgmOverrideModule,
...
]
Ich danke dir sehr:).
Am Montag, den 19. März 2018 um 19:03 Uhr schrieb Juliete notifications@github.com :
Ich konnte das Problem im Escenario lösen, das @escarabin
https://github.com/escarabin beschreibt das Überschreiben des Moduls.import { ModuleWithProviders, Inject, Optional, NgModule } from '@angular/core';
importiere {CommonModule} aus '@angular/common';
importiere { AgmCoreModule, LAZY_MAPS_API_CONFIG, MapsAPILoader } von '@agm/core';
import { LazyMapsAPILoader, LazyMapsAPILoaderConfigLiteral } from '@agm/core/services/maps-api-loader/lazy-maps-api-loader';
import { WindowRef, DocumentRef, BROWSER_GLOBALS_PROVIDERS } from '@agm/core/utils/browser-globals';
import { coreDirectives } from '@agm/core/core.module';@NgModule({ Importe: [CommonModule, AgmCoreModule], Exporte: [AgmCoreModule]})
Exportklasse AgmOverrideModule {
static forRoot(lazyMapsAPILoaderConfig?: LazyMapsAPILoaderConfigLiteral): ModuleWithProviders {
Rückkehr {
ngModule: AgmOverrideModule, Anbieter: [BROWSER_GLOBALS_PROVIDERS, { bereitstellen: MapsAPILoader, useClass: ApiLoader },
{ bereitstellen: LAZY_MAPS_API_CONFIG, useValue: lazyMapsAPILoaderConfig } ]}
}
}Exportklasse ApiLoader erweitert LazyMapsAPILoader {
privater statischer Cargado: boolean;
constructor( @Optional() @Inject(LAZY_MAPS_API_CONFIG) config: any, @Inject(WindowRef) w: WindowRef, @Inject(DocumentRef) d: DocumentRef) {
super(config, w, d);}
load(): Versprochen{
if (ApiLoader.cargado) {
neues Versprechen zurückgeben(auflösen => auflösen());
} anders {
neues Versprechen zurückgeben((auflösen, ablehnen) => {
super.load()
.then(() => {
ApiLoader.cargado = wahr;
beschließen();
})
.catch(err => {
ablehnen (irr);
});
});
}
}
}Und Importieren des Moduls in das gemeinsam genutzte Modul
AgmOverrideModule.forRoot({ apiKey: environment.claveMaps }),
—
Sie erhalten dies, weil Sie kommentiert haben.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/SebastianM/angular-google-maps/issues/692#issuecomment-374212677 ,
oder den Thread stumm schalten
https://github.com/notifications/unsubscribe-auth/AiXUoVhigXAsP1d3tYQsPwK8UP_T-lfXks5tf7OkgaJpZM4KMHK6
.
Ich habe auch das Problem mit Version 1.0.0-beta.5 der Bibliothek. Ich habe das Problem untersucht und es tritt nicht in jedem Fall auf.
Hier ist der Kontext, ich habe das Hauptmodul, das AgmCoreModule.forRoot
verwendet:
@NgModule({
imports: [
(...)
AgmCoreModule.forRoot({
apiKey: environment.googleMaps.apiKey
}),
und ein faules Modul, das AgmCoreModule
verwendet:
@NgModule({
declarations: [
(...)
],
imports: [
(...)
AgmCoreModule,
Ich kann das Problem reproduzieren, wenn ich zuerst auf eine Seite gehe, die mit dem Root-Modul verknüpft ist, und dann auf eine Seite des Lay-Moduls gehe. Wenn ich direkt auf die Seite innerhalb des faulen Moduls gehe, habe ich das Problem nicht ...
Ich habe das Problem ein wenig untersucht und festgestellt, dass die Methode load
des LayLoader von agm in diesem Fall zweimal parallel aufgerufen wird:
FitBoundsService
function FitBoundsService(loader) {
var _this = this;
this._boundsChangeSampleTime$ = new BehaviorSubject(200);
this._includeInBounds$ = new BehaviorSubject(new Map());
this.bounds$ = from(loader.load()).pipe(flatMap(function () { return _this._includeInBounds$; }), sample(this._boundsChangeSampleTime$.pipe(switchMap(function (time) { return timer(0, time); }))), map(function (includeInBounds) { return _this._generateBounds(includeInBounds); }), shareReplay(1));
}
GoogleMapsAPIWrapper
GoogleMapsAPIWrapper.prototype.createMap = function (el, mapOptions) {
var _this = this;
return this._zone.runOutsideAngular(function () {
return _this._loader.load().then(function () {
var map = new google.maps.Map(el, mapOptions);
_this._mapResolver(map);
return;
});
});
};
Haben Sie eine Idee, wie Sie dieses Problem beheben können?
Danke!
Hilfreichster Kommentar
@escarabin Ich hatte ein ähnliches Problem. Versuche dies.
Sie müssen Karten in das Root-Anwendungsmodul importieren, also gehen Sie so vor:
Aber wenn Sie Karten in einer Komponente verwenden möchten, die nicht zu diesem Modul gehört, gehen Sie zu diesem Modul und tun Sie Folgendes: