Angular-google-maps: как инициализировать модуль с переменной apiKey

Зависит от того, какой инструмент сборки вы используете (например, angular-cli, пользовательский веб-пакет или ...) и откуда должна взяться переменная.
Это может быть немного сложно. Особенно, если вы также хотите использовать компиляцию 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 (от "from" angular2-google-maps / core / services ").

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

В этот инъекционный файл я могу внедрить другие сервисы и откуда-нибудь прочитать конфигурацию.
(например, если вы используете angular-cli, вы можете импортировать туда среды). Или, может быть, прочитать домен из браузера ... или вызвать серверный API ...

Я только что пробовал то, что описано выше. Ему удается обойти ошибки AoT, но ключ API не передается в Google Maps, поэтому он возвращает ошибку отсутствия ключа.

В моем случае использования я использую расширенный-define-webpack-plugin, чтобы добавить глобальные настройки конфигурации времени компиляции (ключи API, которые могут изменяться в зависимости от типа сборки и т. Д.).

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

Я использую angular 4 и CLI 1.0.2, я пытаюсь получить приведенный выше код с помощью @kyranjamie, но я не могу заставить его работать, то, что мы пытаемся, в основном то же самое, настроить другой ключ для prod vs. dev

это мой код, что я делаю не так?

`
@Injectable ()
класс экспорта GoogleMapsConfig реализует LazyMapsAPILoaderConfigLiteral {
общедоступный apiKey: строка;
constructor () {
if (environment.production) {
this.apiKey = КЛЮЧ ВСТАВЛЕН ЗДЕСЬ
};
}
}
@NgModule ({
объявления: [
AppComponent
],
импорт: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
AppRoutingModule,
NgbModule.forRoot (),
NouisliderModule,
AgmCoreModule.forRoot ()
],
поставщики: [
{предоставить: LAZY_MAPS_API_CONFIG, useClass: GoogleMapsConfig}
],
бутстрап: [AppComponent]
})
export class AppModule {

}
`

Вы уверены, что if (environment.production) когда-нибудь примет истинное значение?

Я решил эту проблему, спасибо за ваш отзыв

@daBishMan или @kyranjamie , ребята, если вы когда-нибудь это догадались, не могли бы вы опубликовать свое окончательное решение? @kyranjamie , моя проблема похожа на вашу, ... в сборке продукта, касающейся AOT, инициализация agm-map в запросе на maps.google.com, ... параметр URL API-KEY не отправляется . Таким образом, он возвращается с ошибками «отсутствует ключ API».

@ 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]
    }

Ссылка на класс Config - это переменная webpack во время сборки, которая заменяет настройки карты переменных, используемых в режимах Dev или Prod.

Привет

Мне удалось получить динамический ключ, как в комментариях @ jorrit-wehelp, но в моем сценарии после выхода пользователя из системы и входа в систему значение agmKey не обновляется и не может видеть карту

То, что я сделал, было похоже на то, что в нашем модульном компоненте мы добавили следующий код
Итак, я переместил class GoogleMapsConfig и {provide: LAZY_MAPS_API_CONFIG, useClass: GoogleMapsConfig} внутрь карты @component

`` ...
импортировать {LAZY_MAPS_API_CONFIG, LazyMapsAPILoaderConfigLiteral} из '@ agm / core';
импортировать {AuthService} из '@ pl-core / _services';

@Injectable ();
class GoogleMapsConfig реализует LazyMapsAPILoaderConfigLiteral {
общедоступный apiKey: строка;
constructor () {
console.log ('ВНУТРЕННИЕ КАРТЫ'); // Это не отображается в консоли
this.apiKey = _authService.currentUser () && _authService.currentUser (). agmKey? _authService.currentUser (). agmKey: '';
_authService.getMapKey $ .subscribe ((key) => {
this.apiKey = ключ;
})
}
}

@Составная часть({
селектор: 'map-comp',
templateUrl: './dyn-map.component.html',
styleUrls: ['./dyn-map.component.scss'],
поставщики: [{предоставить: LAZY_MAPS_API_CONFIG, useClass: GoogleMapsConfig}],
инкапсуляция: ViewEncapsulation.None
})

`` ''
после выхода из системы и входа в систему с другим пользователем элемент управления не попадает в класс GoogleMapsConfig. Что я могу сделать, чтобы решить эту проблему?

У меня было решение @jorrit-wehelp, работающее, но только с перерывами, потому что у меня было состояние гонки, когда моя служба, возвращающая ключ api, не всегда возвращала его вовремя дляэлемент, чтобы попробовать и отрендерить Чтобы заставитьчтобы дождаться возврата ключа api, я просто сделал следующее:

конструктор моего компонента карты:

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>

Я не знаю, применимо ли это ко всем или это больше зависит от конкретного случая, но я обнаружил, что это результат процесса компиляции AOT Angular, а не проблема с самим agm. Вот обзор моей ситуации.

Я хотел сделать конфигурацию ключа API управляемой вместо жестко закодированной строки, чтобы перемещение по разным средам позволяло мне использовать разные ключи API и контролировать использование API. Для этого я попросил мою внутреннюю часть .NET внедрить некоторый JavaScript со значением, которое мне нужно, в глобальное пространство имен, хранящееся в Example.Namespace.GoogleMapsApiKey . Имея это в виду, вот мой код TypeScript.

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

Я думал, что создание определения типа для некоторой глобальной переменной const с нужным мне значением будет включено в процесс сборки AOT. Однако, как оказалось, компилятор AOT поддерживает только Только инициализированные переменные и константы » без выдачи ошибки из Angular CLI. Как только я переключился на использование какого-то провайдера LAZY_MAPS_API_CONFIG с классом, который мне удалось успешно использовать.

Эта проблема была автоматически помечена как устаревшая, поскольку в последнее время не было активности. Он будет закрыт, если больше не будет активности. Спасибо за ваш вклад.