Angular-google-maps: कैसे चर एपीआई के साथ मॉड्यूल initilize

निर्भर करता है कि आप किस प्रकार के बिल्ड टूल का उपयोग कर रहे हैं (जैसे कोणीय-क्ली या कस्टम वेबपैक या ...) और चर कहाँ से आना चाहिए।
यह थोड़ा मुश्किल हो सकता है। विशेष रूप से जब आप AOT संकलन का उपयोग करना चाहते हैं, जो @NgModule के अंदर बहुत अधिक गतिशील कोड को रोकता है।

वर्तमान में मैंने जो समाधान लागू किया है, वह मेरे मुख्य app.module में 'आलसी कॉन्फिग प्रोवाइडर' को ओवरराइड कर रहा है।

मॉड्यूल में जहां मैं वास्तव में नक्शे का उपयोग करता हूं, मैं forRoot में एक खाली कॉन्फ़िगरेशन का उपयोग करता हूं:

AgmCoreModule.forRoot()

मेरे app.module.ts में:
इंजेक्शन टोकन आयात करें:

import { LAZY_MAPS_API_CONFIG }
  from 'angular2-google-maps/core/services';

@NgModule में प्रदाताओं को जोड़ें:

providers: [
    {provide: LAZY_MAPS_API_CONFIG, useClass: GoogleMapsConfig}
  ],

और उस 'GoogleMapsConfig' वर्ग को लागू करें, जो LazyMapsAPILoaderConfigLiteral इंटरफ़ेस ('से' कोणीय 2-गूगल-मैप्स / कोर / सेवाओं ') को लागू करे।

@Injectable()
class GoogleMapsConfig {
  apiKey: string;
...
  constructor() {
    apiKey = getMyApiKeyFromSomewhere()
...
  }
}

उस इंजेक्टेबल में मैं अन्य सेवाओं को इंजेक्ट कर सकता हूं और कहीं से कॉन्फ़िगरेशन पढ़ सकता हूं।
(उदाहरण के लिए यदि आप कोणीय-क्ली का उपयोग करते हैं तो आप वहां के वातावरण को आयात कर सकते हैं)। या हो सकता है कि ब्राउज़र से डोमेन पढ़ें ... या किसी सर्वराइड एपीआई को कॉल करें ...

मैंने सिर्फ ऊपर की कोशिश की। यह एओटी त्रुटियों को दरकिनार करने का प्रबंधन करता है, लेकिन एपीआई कुंजी Google मैप्स को पारित नहीं किया जा रहा है - इसलिए यह महत्वपूर्ण लापता त्रुटि देता है।

मेरे उपयोग के मामले में, मैं कंपाइल-टाइम ग्लोबल कॉन्फिगरेशन सेटिंग्स (एपीआई कीज़ जो कि बिल्ड टाइप आदि के आधार पर बदल सकती है) को जोड़ने के लिए विस्तारित-डिफाइन-वेबपैक-प्लगइन का उपयोग कर रहा हूं।

import { LAZY_MAPS_API_CONFIG, LazyMapsAPILoaderConfigLiteral } from 'angular2-google-maps/core/services';

@Injectable()
export class GoogleMapsConfig implements LazyMapsAPILoaderConfigLiteral {
  apiKey: string = CONFIG.googleMapsAPIKey;
}

@NgModule({
  declarations: [...],
  imports: [...],
  providers: [{provide: LAZY_MAPS_API_CONFIG, useClass: GoogleMapsConfig}],
  bootstrap: [AppComponent]
})
export class AppModule {}

और, मेरे आलसी लोडेड मॉड्यूल में जहां मैं मैप का उपयोग कर रहा हूं, AgmCoreModule.forRoot() कॉल कर रहा हूं

मैं कोणीय 4 और CLI 1.0.2 का उपयोग कर रहा हूं, मैं @kyranjamie द्वारा उपरोक्त कोड प्राप्त करने की कोशिश कर रहा हूं, लेकिन मुझे यह काम करने के लिए नहीं मिल सकता है, हम जो कोशिश कर रहे हैं वह मूल रूप से ठेस बनाम देव के लिए एक अलग कुंजी सेट है

यह मेरा कोड है, मैं क्या गलत कर रहा हूं?

`
@ इंजेक्शन ()
निर्यात वर्ग
सार्वजनिक एपीके: स्ट्रिंग;
कंस्ट्रक्टर () {
अगर (environment.production) {
this.apiKey = कुंजी इसमें शामिल है
};
}
}
@NgModule ({
घोषणाएँ: [
AppComponent
],
आयात: [
BrowserModule,
फॉर्म मोड,
प्रतिक्रियाशील
HttpModule,
AppRoutModule,
NgbModule.forRoot (),
नौलिस्डरमॉडल,
AgmCoreModule.forRoot ()
],
प्रदाता: [
{प्रदान करें: LAZY_MAPS_API_CONFIG, useClass: GoogleMapsConfig}
],
बूटस्ट्रैप: [AppComponent]
})
निर्यात वर्ग AppModule {

}
`

क्या आप सुनिश्चित हैं कि if (environment.production) कभी भी सच हो जाएगा?

मैंने आपकी प्रतिक्रिया के लिए इस धन्यवाद को हल कर दिया है

@daBishMan या @kyranjamie , अगर आप लोग कभी यह पता लगा @kyranjamie , मेरा मुद्दा आपके जैसा ही प्रतीत होता है, ... एक उत्पाद निर्माण पर जहाँ AOT का संबंध है, maps.google.com के अनुरोध में agm-map आरंभीकरण, ... कोई URL API-KEY पैरामीटर नहीं भेजा जा रहा है । इसलिए, यह "लापता एपीआई कुंजी" त्रुटियों के साथ वापस आता है।

@ jorrit-wehelp, आपके मार्गदर्शन के लिए धन्यवाद। मेरे लिए जो काम कर रहा है उसमें मैं नीचे हूँ…।

import {Injectable} from "@angular/core";
import {LazyMapsAPILoaderConfigLiteral} from "@agm/core";
import {Config} from "../providers/config";

@Injectable()
export class MapsConfig implements LazyMapsAPILoaderConfigLiteral{
  public apiKey: string
  public libraries: string[]
  constructor(config: Config) {
    this.apiKey = config.get("MAP_API_JS_KEY")
    this.libraries = ['places']
    console.log("lazy map init with " + this.apiKey)
  }
}

मेरे मुख्य @ngmodule में , मेरे पास प्रदाताओं में यह है ...

    {
      provide: LAZY_MAPS_API_CONFIG,
      useClass: MapsConfig,
      deps: [Config]
    }

कॉन्फिगर वर्ग का संदर्भ एक बिल्ड-टाइम वेबपैक वैरिएबल-रिप्लेसमेंट है, जो देव या प्रोडक्शन मोड्स में उपयोग किए जाने वाले वेरिएबल्स के मैप का सेटअप करता है।

नमस्ते

मैं @ jorrit-wehelp टिप्पणियों के अनुसार, डायनेमिक कुंजी प्राप्त करने में सक्षम था, लेकिन उपयोगकर्ता लॉगआउट और लॉग इन के बाद मेरे परिदृश्य में agmKey मान अपडेट नहीं कर रहा है और मानचित्र देखने में सक्षम नहीं है

मैंने जो किया वह हमारे मॉड्यूल घटक की तरह था जिसमें हमने निम्नलिखित कोड जोड़ा
इसलिए मैंने class GoogleMapsConfig और {provide: LAZY_MAPS_API_CONFIG, useClass: GoogleMapsConfig} नक्शे के अंदर @component स्थानांतरित कर दिया

`` `...
आयात {LAZY_MAPS_API_CONFIG, LazyMapsAPILoaderConfigLiteral} '@ agm / core' से;
'@ pl-core / _services' से आयात {AuthService};

@ इंजेक्शन ();
वर्ग GoogleMapsConfig लागू करता है
सार्वजनिक एपीके: स्ट्रिंग;
कंस्ट्रक्टर () {
कंसोल.लॉग ('INSIDE MAPs'); // यह कंसोल में प्रदर्शित नहीं है
यह। _authService.currentUser ()। agmKey: '';
_authService.getMapKey $ .subscribe ((कुंजी) => {
this.apiKey = key;
})
}
}

@ समुदाय ({
चयनकर्ता: 'मानचित्र-COMP',
templateUrl: '।
styleUrls: ['./dy-map.component.scss'],
प्रदाता: [{प्रदान करें: LAZY_MAPS_API_CONFIG, उपयोग: GoogleMapsConfig}],
एनकैप्सुलेशन: ViewEncapsulation.None
})

`` `
जब हम लॉगआउट करते हैं और किसी अन्य उपयोगकर्ता के साथ लॉगिन करते हैं तो GoogleMapsConfig वर्ग के अंदर नियंत्रण नहीं आ रहा है मैं इस मुद्दे को हल करने के लिए क्या कर सकता हूं ??

मेरे पास @ jorrit-wehelp का समाधान काम कर रहा था, लेकिन केवल रुक-रुक कर क्योंकि मेरे पास एक दौड़ की स्थिति थी जहां मेरी सेवा जो एपी कुंजी देती है वह हमेशा इसे समय के लिए वापस नहीं करेगीप्रयास करने और प्रस्तुत करने के लिए तत्व। जबरदस्ती करने के लिएप्रतीक्षा करने के लिए जब तक एपीआई कुंजी वापस नहीं की गई थी, मैंने बस यही किया था:

मेरे मानचित्र घटक का निर्माता:

constructor(private envService: EnvironmentService) {
    this.envService.environment$.subscribe(environment => {
      // setTimeout is to wait a beat since my GoogleMapsConfig receives
      // the key at the same instant.
      setTimeout(() => this.gmapsApiKeyReady = true);
    });
  }

फिर मार्कअप में:

<agm-map *ngIf="gmapsApiKeyReady" ...></agm-map>

मुझे नहीं पता कि यह सभी के लिए लागू होगा या यदि यह केस के आधार पर केस से अधिक है, लेकिन मुझे पता चला कि यह एंगुलर की एओटी संकलन प्रक्रिया का परिणाम है, जैसा कि एग्म के साथ एक समस्या के विपरीत है। यहां मेरे पास उस स्थिति का अवलोकन है।

मैं एक हार्ड कोडित स्ट्रिंग के बजाय एपीआई कुंजी कॉन्फिगर को संचालित करना चाहता था, जैसे कि विभिन्न वातावरणों के माध्यम से मुझे अलग-अलग एपीआई कुंजियों का उपयोग करने और एपीआई के उपयोग की निगरानी करने की अनुमति होगी। ऐसा करने के लिए, मैंने अपने .NET बैक-एंड को कुछ जावा स्क्रिप्ट इंजेक्ट किया था, जिसकी मुझे वैश्विक नेमस्पेस में आवश्यकता थी, Example.Namespace.GoogleMapsApiKey में संग्रहीत। इसे ध्यान में रखते हुए, यहाँ मेरा टाइपस्क्रिप्ट कोड था।

// typings.d.ts
declare namespace Example.Namespace {
    export const GoogleMapsApiKey: string;
}

// app.module.ts
import { AgmCoreModule } from "@agm/core";
import { NgModule } from "@angular/core";

@NgModule({
    // ...
    imports: [
        AgmCoreModule.forRoot({
            apiKey: Example.Namespace.GoogleMapsApiKey,
        })
    ],
    // ...
})
export class AppModule {}

मैंने सोचा था कि AOT बिल्ड प्रक्रिया के दौरान मेरे द्वारा आवश्यक मान के साथ कुछ कॉन्स्टेबल वैरिएबल के लिए एक प्रकार की परिभाषा तैयार की जाएगी। हालाँकि, चूंकि यह एओटी कंपाइलर केवल को कंपाउंड समय पर शामिल होने से रोका जाता है। प्रभावी रूप से जो हो रहा था, वह " केवल आरंभिक चर और स्थिरांक " त्रुटि थी, जो बिना किसी त्रुटि के कोणीय सीएलआई से निकल रही थी। एक बार जब मैंने एक वर्ग का उपयोग करके LAZY_MAPS_API_CONFIG प्रदाता का उपयोग करने के लिए स्विच बनाया, तो मैं सफलतापूर्वक सक्षम था।

इस मुद्दे को स्वचालित रूप से बासी के रूप में चिह्नित किया गया है क्योंकि इसमें हाल की गतिविधि नहीं थी। आगे कोई गतिविधि नहीं होने पर इसे बंद कर दिया जाएगा। आपके योगदानों के लिए धन्यवाद।