Angular-google-maps: bagaimana menginisiasi modul dengan variabel apiKey

Tergantung pada jenis alat build yang Anda gunakan (mis. Angular-cli atau webpack khusus atau ...) dan dari mana variabel harus berasal.
Ini bisa sedikit rumit. Khususnya ketika Anda juga ingin menggunakan kompilasi AOT, yang mencegah terlalu banyak kode dinamis di dalam @NgModule .

Solusi yang saat ini saya terapkan adalah menimpa 'penyedia konfigurasi malas' di app.module utama saya.

Dalam modul di mana saya benar-benar menggunakan peta, saya menggunakan konfigurasi kosong di forRoot:

AgmCoreModule.forRoot()

Di app.module.ts saya:
impor token injeksi:

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

Tambahkan ke penyedia di @NgModule :

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

Dan implementasikan kelas 'GoogleMapsConfig' itu, yang seharusnya mengimplementasikan antarmuka LazyMapsAPILoaderConfigLiteral (dari 'from' angular2-google-maps / core / services ').

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

Dalam suntikan itu saya dapat menyuntikkan layanan lain dan membaca konfigurasi dari suatu tempat.
(misalnya jika Anda menggunakan angular-cli Anda dapat mengimpor lingkungan di sana). Atau mungkin membaca domain dari browser ... atau memanggil API sisi server ...

Saya baru saja mencoba yang di atas. Ia berhasil menghindari kesalahan AoT, tetapi kunci API tidak diteruskan ke Google Maps - sehingga mengembalikan kesalahan kunci yang hilang.

Dalam kasus penggunaan saya, saya menggunakan extended-define-webpack-plugin untuk menambahkan pengaturan konfigurasi global waktu kompilasi (kunci API yang dapat berubah berdasarkan jenis build, dll).

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 {}

Dan, dalam modul saya yang dimuat malas di mana saya menggunakan peta, memanggil AgmCoreModule.forRoot()

Saya menggunakan angular 4 dan CLI 1.0.2, saya mencoba untuk mendapatkan kode di atas dengan @kyranjamie tetapi saya tidak bisa mendapatkan ini berfungsi, apa yang kami coba pada dasarnya sama mengatur kunci yang berbeda untuk prod vs. dev

ini kode saya, apa yang saya lakukan salah?

`
@Bayu_joo
kelas ekspor GoogleMapsConfig mengimplementasikan LazyMapsAPILoaderConfigLiteral {
apiKey publik: string;
konstruktor () {
if (environment.production) {
this.apiKey = KUNCI DIMASUKKAN DI SINI
};
}
}
@Bayu_joo ({
deklarasi: [
AppComponent
],
impor: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
AppRoutingModule,
NgbModule.forRoot (),
NouisliderModule,
AgmCoreModule.forRoot ()
],
penyedia: [
{sediakan: LAZY_MAPS_API_CONFIG, useClass: GoogleMapsConfig}
],
bootstrap: [AppComponent]
})
ekspor kelas AppModule {

}
`

Apakah Anda yakin bahwa if (environment.production) akan pernah diselesaikan menjadi true?

Saya telah menyelesaikan ini, terima kasih atas tanggapan Anda

@daBishMan atau @kyranjamie , Jika kalian pernah mengetahui hal ini, dapatkah Anda memposting solusi akhir Anda? @kyranjamie , masalah saya tampaknya serupa dengan masalah Anda, ... pada produk yang dibuat di mana AOT terkait, inisialisasi peta-agm dalam permintaan ke maps.google.com, ... tidak ada parameter URL API-KEY yang dikirim . Oleh karena itu, ia kembali dengan kesalahan "kunci api hilang".

@ jorrit-wehelp, terima kasih atas bimbingannya. Saya termasuk di bawah ini apa yang berhasil untuk saya ....

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)
  }
}

di @ngmodule utama saya, saya memiliki ini di penyedia ...

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

Referensi ke kelas Config adalah penggantian variabel webpack waktu pembuatan yang menyiapkan peta variabel yang digunakan dalam mode Dev atau Prod.

Halo

Saya dapat mencapai kunci dinamis, seperti dengan komentar @ jorrit-wehelp, tetapi dalam skenario saya setelah pengguna keluar dan masuk, nilai agmKey tidak diperbarui dan tidak dapat melihat peta

apa yang saya lakukan adalah seperti dalam komponen modul kami, kami menambahkan kode berikut
Jadi saya memindahkan class GoogleMapsConfig dan {provide: LAZY_MAPS_API_CONFIG, useClass: GoogleMapsConfig} di dalam peta @component

`` ...
impor {LAZY_MAPS_API_CONFIG, LazyMapsAPILoaderConfigLiteral} dari '@ agm / core';
impor {AuthService} dari '@ pl-core / _services';

@Injectable ();
class GoogleMapsConfig mengimplementasikan LazyMapsAPILoaderConfigLiteral {
apiKey publik: string;
konstruktor () {
console.log ('INSIDE MAPs'); // Ini tidak ditampilkan di konsol
this.apiKey = _authService.currentUser () && _authService.currentUser (). agmKey? _authService.currentUser (). agmKey: '';
_authService.getMapKey $ .subscribe ((key) => {
this.apiKey = kunci;
})
}
}

@Komponen({
pemilih: 'map-comp',
templateUrl: './dyn-map.component.html',
styleUrls: ['./dyn-map.component.scss'],
penyedia: [{sediakan: LAZY_MAPS_API_CONFIG, useClass: GoogleMapsConfig}],
enkapsulasi: ViewEncapsulation.None
})

``
setelah kita keluar dan masuk dengan pengguna lain, kontrol tidak masuk ke dalam kelas GoogleMapsConfig apa yang dapat saya lakukan untuk mengatasi masalah ini ??

Saya memiliki solusi @ jorrit-wehelp yang berfungsi tetapi hanya sesekali karena saya memiliki kondisi balapan di mana layanan saya yang mengembalikan kunci api tidak selalu mengembalikannya tepat waktu untukelemen untuk dicoba dan dirender. Untuk memaksauntuk menunggu sampai kunci api dikembalikan, saya hanya melakukan ini:

konstruktor komponen peta saya:

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);
    });
  }

Kemudian di markup:

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

Saya tidak tahu apakah ini akan berlaku untuk semua orang atau jika ini lebih merupakan kasus per kasus, tetapi saya menemukan ini adalah hasil dari proses kompilasi AOT Angular, yang bertentangan dengan masalah dengan agm itu sendiri. Berikut ini gambaran umum dari situasi yang saya alami.

Saya ingin membuat konfigurasi kunci API digerakkan alih-alih string kode keras, sehingga berpindah melalui lingkungan yang berbeda akan memungkinkan saya menggunakan kunci API yang berbeda dan memantau penggunaan API. Untuk melakukan ini, saya meminta back-end .NET saya menyuntikkan beberapa JavaScript dengan nilai yang saya perlukan ke dalam namespace global, disimpan dalam Example.Namespace.GoogleMapsApiKey . Dengan mengingat hal itu, inilah kode TypeScript saya.

// 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 {}

Saya pikir membuat definisi tipe untuk beberapa variabel global const dengan nilai yang saya butuhkan akan disertakan selama proses pembuatan AOT. Namun, ternyata kompilator AOT hanya mendukung subset alat TypeScript , yang mencegah variabel disertakan pada waktu kompilasi. Secara efektif apa yang terjadi adalah kesalahan " Hanya variabel dan konstanta yang diinisialisasi " tanpa kesalahan yang dipancarkan dari CLI Angular. Setelah saya beralih untuk menggunakan semacam penyedia LAZY_MAPS_API_CONFIG menggunakan kelas, saya berhasil melakukannya.

Masalah ini secara otomatis ditandai sebagai usang karena tidak ada aktivitas terbaru. Ini akan ditutup jika tidak ada aktivitas lebih lanjut. Terima kasih atas kontribusi Anda.